How to Create a Div That Fills the Space Between Header and Footer Using Flexbox?

Patricia Arquette
Release: 2024-11-10 03:23:02
Original
258 people have browsed it

How to Create a Div That Fills the Space Between Header and Footer Using Flexbox?

Creating a Div to Fill Space Between Header and Footer Divs

When transitioning from table-based layouts to using divs, maintaining proper spacing between header, content, and footer elements can be a challenge. Here's an effective solution using Flexbox:

Flexbox Solution

Flexbox allows for a flexible and responsive layout, ensuring that the header and footer remain fixed while the content area fills the remaining space.

HTML:

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>
Copy after login

CSS:

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;
}
Copy after login

With this code, the body element is displayed as a flexbox column, and the header and footer are set as flex: none, indicating that they should not expand or shrink. The main element, which contains the content, is set as flex: auto, which allows it to take up all the remaining space. The overflow-y and -webkit-overflow-scrolling properties ensure that the content can be scrolled vertically within the main element.

This approach allows for a dynamic layout that adjusts to different screen resolutions, ensuring that the header and footer stay fixed while the content fills the available space.

The above is the detailed content of How to Create a Div That Fills the Space Between Header and Footer Using Flexbox?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template