小编典典

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

css

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

阅读 422

2020-05-16

共1个答案

小编典典

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

2020-05-16