How to Create a Div That Fills the Space Between Header and Footer Using Flexbox?-CSS Tutorial-php.cn

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

284 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!