html - 覆盖外部和内部div无滚动条的可用高度

Question

我创建了一个 jsFiddle显示内容。

.container {
    height: 100%;
    width: 100%;
    margin: 0;
}

.body {
   position: relative;
   height: 100%;
   width: 100%;
   margin: 0 auto;
   background-color: #F7F4F2;
   text-align: center;
}

.form {
  background-color: #fff;
  padding: 50px 20px;
  color: #333;
}

.footer {
  margin-top: 26px;
  font-size: 20px;
  line-height: 26px;
}

.content {
  padding: 5% 5%;
}

<div class="container">
  <div class="body">
    <div class="content">
      <div class="form">
        <h1>Content</h1>
      </div>
      <div class="footer">
        <a href="#">This is a link</a>
      </div>
    </div>
  </div>
</div>

我没有做的是让 container 元素填充可用的视口(viewport)，并让内部的白色 div 也拉伸(stretch)到底部并考虑填充。

我还想将链接移动到视口(viewport)底部。

如果没有 JavaScript，这可能吗？

Answer 1

使用 flexbox 做这样的事情怎么样？

将 display: flex; 放在 .content 上 然后在主子 div 上使用 flex: 1;，然后使用 height: 100vh;。

现在您不需要所有宽度和高度为 100% 的样式。

还使用了 box-sizing: border-box 这样填充就不会影响容器的大小。

* {
  box-sizing: border-box;
}

.container {
  margin: 0;
}

.body {
  position: relative;
  margin: 0 auto;
  background-color: #F7F4F2;
  text-align: center;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 5% 5%;
}
.form {
  flex: 1;
  background-color: #fff;
  padding: 50px 20px;
  color: #333;
}

.footer {
  margin-top: 26px;
  font-size: 20px;
  line-height: 26px;
}

<div class="container">
  <div class="body">
    <div class="content">
      <div class="form">
        <h1>Content</h1>
      </div>
      <div class="footer">
        <a href="#">This is a link</a>
      </div>
    </div>
  </div>
</div>