如何使用 Flexbox 创建填充页眉和页脚之间空间的 Div？-css教程-PHP中文网

如何使用 Flexbox 创建填充页眉和页脚之间空间的 Div？

Patricia Arquette

发布： 2024-11-10 03:23:02

原创

297 人浏览过

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

创建 Div 来填充页眉和页脚 Div 之间的空间

从基于表格的布局过渡到使用 div 时，在页眉、内容和页脚之间保持适当的间距元素可能是一个挑战。这是使用 Flexbox 的有效解决方案：

Flexbox 解决方案

Flexbox 允许灵活且响应式的布局，确保页眉和页脚保持固定，同时内容区域填充剩余空间。

HTML:

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

登录后复制

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;
}

登录后复制

使用此代码，body 元素显示为 Flexbox 列，页眉和页脚设置为 flex: none ，表明它们不应扩大或缩小。包含内容的主元素被设置为 flex: auto，这允许它占用所有剩余空间。 Overflow-y 和 -webkit-overflow-scrolling 属性确保内容可以在主元素内垂直滚动。

这种方法允许动态布局，根据不同的屏幕分辨率进行调整，确保标题和当内容填充可用空间时，页脚保持固定。

以上是如何使用 Flexbox 创建填充页眉和页脚之间空间的 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！