search

Home  >  Article  >  Web Front-end  >  How to Achieve Responsive Spacing between Header, Content, and Footer Divs using Flexbox?

How to Achieve Responsive Spacing between Header, Content, and Footer Divs using Flexbox?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-15 13:14:02668browse

How to Achieve Responsive Spacing between Header, Content, and Footer Divs using Flexbox?

Solving Space-Filling Div Placement between Header and Footer

In the transition from table to div-based layouts, a common hurdle arises: ensuring cohesive and responsive spacing between header, content, and footer divs. Here's a reliable approach using Flexbox:

Flexbox Solution

Flex layout empowers you to dynamically distribute space, allowing for natural header and footer heights while content seamlessly fills the remaining area. This mimics the intuitive behavior of native mobile apps, where headers and footers adhere to the viewport's top and bottom edges, leaving content scrollable within the main section.

HTML and CSS Implementation

The following code demonstrates the solution:

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>  
html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

By leveraging Flexbox's flexibility, you can elegantly and responsively allocate space within your webpage, ensuring optimal user experience regardless of screen resolution.

The above is the detailed content of How to Achieve Responsive Spacing between Header, Content, and Footer Divs using Flexbox?. For more information, please follow other related articles on the PHP Chinese website!

css html for while using this viewport transition table
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS3 Transitions vs. jQuery Animations: Who Wins the Speed Race?Next article：CSS3 Transitions vs. jQuery Animations: Who Wins the Speed Race?

Related articles

See more