如何创建div以填充页眉和页脚div之间的所有空间

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在努力从使用表格进行布局过渡到使用div（是的，是的，是伟大的辩论）。我有3个div，页眉，内容和页脚。页眉和页脚各为50px。如何使页脚div停留在页面底部，而内容div填充两者之间的空间？我不想硬编码内容div的高度，因为屏幕分辨率会改变。

回答：

Flexbox解决方案

使用flex布局，我们可以在实现自然高度的页眉和页脚的同时实现这一目标。页眉和页脚都将分别贴在视口的顶部和底部（非常类似于本机移动应用程序），并且主要内容区域将填充剩余的空间，而任何垂直溢出都将在该区域内滚动。

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

以上是 如何创建div以填充页眉和页脚div之间的所有空间 的全部内容， 来源链接： utcz.com/qa/398167.html

回到顶部