How Can I Create a Fluid Content DIV Between a Fixed Header and Footer Using Flexbox?-CSS Tutorial-php.cn

How Can I Create a Fluid Content DIV Between a Fixed Header and Footer Using Flexbox?

Patricia Arquette

Release： 2024-11-08 08:17:01

Original

303 people have browsed it

How Can I Create a Fluid Content DIV Between a Fixed Header and Footer Using Flexbox?

Creating a Fluid Content DIV Between Header and Footer

In the pursuit of modern layout design, you've pivoted from tables to divs. Facing the challenge of aligning your header, footer, and content divs, you seek an elegant solution that caters to varying screen resolutions.

Consider the Flexbox approach, which offers a robust solution for this layout dilemma. By leveraging Flexbox's inherent capabilities, you can achieve the desired outcome: sticky header and footer elements with a content area that seamlessly fills the remaining space and allows for smooth scrolling within its boundaries.

Flexbox Implementation

Implementing Flexbox is straightforward, requiring a few HTML and CSS tweaks:

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

This setup locks the header and footer elements within their specified sizes, while allowing the content area to expand dynamically to fill the remaining vertical space. The overflow-y and -webkit-overflow-scrolling properties ensure that any content exceeding the content area's height will scroll smoothly within its confines.

Embrace the flexibility and versatility of Flexbox's power and effortlessly create harmonious layouts that adapt seamlessly to diverse screen resolutions.

The above is the detailed content of How Can I Create a Fluid Content DIV Between a Fixed Header and Footer Using Flexbox?. For more information, please follow other related articles on the PHP Chinese website!