时间戳

首页 > 解决方案 > Flex 页眉、内容、页脚布局

html - Flex 页眉、内容、页脚布局

问题描述

在下面的代码中，我希望内容部分填充到页脚到达屏幕底部的位置。

编辑：也许我应该对中心对齐更清楚一点。页眉和页脚应垂直对齐，所有三个项目都需要从左垂直线开始，如下所示：在此处输入图像描述

我怎样才能做到这一点？

html, body {
  margin: 0;
  padding: 0;
}

container{
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  width: 100%;
}

header {
    height: 92px;
    background-color: #FFFFFF;
    border: 1px solid #DCE5EB;
}

footer {
    height: 92px;
    border: 1px solid #DCE5EB;
    background-color: #FFFFFF;
}

.content {
    height: 700px;
    flex: auto;
    background-color: #FFFFFF;
}
<div class="container">
  <header>Header</header>
  <div class"content">Content</div>
  <footer>Footer</footer>
</div>

标签： htmlcssflexbox

解决方案

你忘了=在你的课程中添加content。这是一个简单的错字。

并为您的内容。因为你有header和的静态高度footer。您可以100vh为您的内容提供高度，并减少高度header和footer加上不要忘记考虑border即2px总。它会解决你的问题。

编辑：可以通过给出line-height等于来实现垂直对齐height。并将其与您的边距对齐。您可以使用margin或padding，具体取决于您的要求。或者你甚至可以使用

display:flex;
align-items:center;

从您的内容中删除94px+94px

html,
body {
  margin: 0;
  padding: 0;
}

container {
  display: flex;
  flex-direction: column;
  top: 0;
  border: 10px solid black;
}

header {
  display: flex;
  align-items: center;
  height: 92px;
  background-color: #FFFFFF;
  border: 1px solid #DCE5EB;
  padding: 0 30px;
}

footer {
  height: 92px;
  display: flex;
  border: 1px solid #DCE5EB;
  background-color: #FFFFFF;
  align-items: center;
  padding: 0 30px;
}

.content {
  min-height: calc(100vh - 94px - 94px);
  background-color: #FFFFFF;
  padding: 0 30px;
}
<div class="container">
  <header>Header</header>
  <div class="content">Content</div>
  <footer>Footer</footer>
</div>

推荐阅读