Question

以下是我的工作with

代码：

header {
  width: 100%;
  background: yellow;
  position: fixed;
  top: 0;
  height: 60px !important;
}
.content {
  margin-top: 60px;
  background: pink;
  min-height: 100%;
  width: 100%;
}
footer {
  width: 100%;
  background: yellow;
  position: fixed;
  bottom: 0;
  height: 30px;
}

<header>
  header
</header>
<div class="content">
  content-main
  <br />

</div>
<footer>
  footer
</footer>

我希望粉红色的钻头伸展到顶部和底部。如果滚动条是粉红色内容div或body div，我真的不在乎。我只是需要我的它来填满整个页面并在它溢出时滚动。

我有一个额外的约束是，如果动态删除页脚，我希望粉红色的内容仍然填满所有空白区域。

Answer 1

我有一个额外的限制是我想要粉红色的内容如果动态删除页脚，仍然填充所有空白区域。

使用flexbox，

添加新元素以包装其他元素，您可以将换行设置为display:flex; flex-direction:column并将flex:1提供给.content。

注意：在height:100%和包装元素中需要html,body，以便在这种情况下flex:1工作。

html,
body {
  height: 100%;
  margin: 0;
}
section {
  display: flex;
  flex-direction: column;
  height: 100%
}
header,
footer {
  width: 100%;
  background: yellow;
  position: fixed;
}
.content {
  margin-top: 60px;
  background: pink;
  flex: 1;
}
header {
  top: 0;
  height: 60px
}
footer {
  bottom: 0;
  height: 30px;
}

<section>
  <header>
    header
  </header>
  <div class="content">
    content-main
  </div>
  <footer>
    footer
  </footer>
</section>

Answer 2

而不是%，使用vh设置容器最小高度以占据整页

.content {
  margin-top: 60px;
  background: pink;
  min-height: calc(100vh - 90px); /* 100% the height of the screen minus header and footer */
  width: 100%;
}

此处示例：http://jsfiddle.net/Digedu/5n1azfyn/

Answer 3

将此设置用于.content：

min-height：calc（100vh - 90px）;

（这是整个窗口高度减去页眉和页脚的高度）

如何让div从上面的div延伸到下面的div？

3 个答案: