首頁 >web前端 >css教學 >如何使用 Flexbox 實現頁首、內容和頁尾 Div 之間的響應式間距？

如何使用 Flexbox 實現頁首、內容和頁尾 Div 之間的響應式間距？

Patricia Arquette原創: 2024-11-15 13:14:02751瀏覽

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.

以上是如何使用 Flexbox 實現頁首、內容和頁尾 Div 之間的響應式間距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html for while using this viewport transition table

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：CSS3 轉場 vs. jQuery 動畫：誰贏得了速度競賽？下一篇：CSS3 轉場 vs. jQuery 動畫：誰贏得了速度競賽？

看更多