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

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

Linda Hamilton

发布： 2024-11-19 06:10:03

原创

639 人浏览过

How to Fill the Space Between Header and Footer with Divs Using Flexbox?

用 Div 填充页眉和页脚之间的空间

从表格过渡到 div 进行布局时，常见的挑战是在保持所需排列的同时适应动态内容高度。下面介绍如何创建一个 div 来填充固定页眉和页脚之间的整个空间。

Flexbox 解决方案

Flex 布局为这种情况提供了一个优雅的解决方案，允许容器元素（页眉和页脚））以保持其固定高度，同时使内容区域能够自动调整。此设置类似于移动应用程序的默认行为。

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 div 成为一个 Flex 容器，其子元素（页眉、主元素和页脚）成为弹性项目。 flex-direction 属性指定 Flex 项目的方向，在本例中为垂直方向（列）。

页眉和页脚元素设置为 flex: none，这意味着它们不会相对于它们的初始尺寸，确保它们保持固定的高度。另一方面，主元素设置为 flex: auto，表示它应该填充剩余空间。

此外，overflow-y:scroll 应用于主元素，以在滚动时引入垂直滚动。内容超出了可用空间。 -webkit-overflow-scrolling: touch 属性改进了 iOS 设备上的滚动行为。

此设置有效地创建了灵活且动态的布局，其中页眉和页脚保持固定在各自的顶部和底部位置，而内容div 无缝填充它们之间的空间，适应不同的屏幕高度。

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