Question

我有一个页眉，包含页眉，内容和页脚。页眉和页脚具有固定的高度，我希望内容调整其高度，以便它在页眉和页脚之间动态匹配。我打算在我的内容中加入背景图像，因此它实际上填满剩余的空置垂直空间至关重要。

我使用Sticky Footer方法确保页脚保留在页面底部。但是，这并不会使内容跨越剩余空间的整个高度。

我尝试了多个解决方案，其中涉及我添加height:100%, height:auto; position:relative，但它无效。

html,
body {
  height: 100%;
  background-color: yellow;
}
header {
  width: 100%;
  height: 150px;
  background-color: blue;
}
header nav ul li {
  display: inline;
  padding: 0 30px 0 0;
  float: left;
}
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 0 -30px 0;
  /* the bottom margin is the negative value of the footer's height */
  position: relative;
}
#wrapper #content {
  background-color: pink;
  width: 400px;
  height: 100%;
  margin: 0 0 -30px 100px;
  padding: 25px 30px 25px 30px;
}
footer {
  margin: -30px 0 0 0;
  width: 100%;
  height: 30px;
  background-color: green;
}

<div id="wrapper">

  <header>
    <div id="logo"></div>

    <nav>
      <ul>
        <li>About</li>
        <li>Menu</li>
        <li>Specials</li>
      </ul>
    </nav>
  </header>

  <div id="content">
    content
    <br>goes
    <br>here
  </div>

</div>

<footer>footer</footer>

Answer 1

关于身高的诀窍：100％是它要求所有父容器也设置其高度。这是一个HTML示例

<html>
  <body>
    <div id="container">
    </div>
  </body>
</html>

为了将高度设置为100％的容器div动态扩展到窗口的高度，您需要确保body和html元素的高度也设置为100％。所以...

html
{
    height: 100%;
}
body
{
    height: 100%;
}
#container
{
    height: 100%;
}

会给你一个扩展到适合你窗口的容器。然后，如果您需要在此窗口上方浮动页脚或标题，则可以使用z索引进行此操作。这是我发现的唯一能够动态填充垂直高度的解决方案。

Answer 2

尝试将您的css更改为：

html,
body {
  height: 100%;
  background-color: yellow;
}
header {
  width: 100%;
  height: 150px;
  background-color: blue;
}
header nav ul li {
  display: inline;
  padding: 0 30px 0 0;
  float: left;
}
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 0 -30px 0;
  /* the bottom margin is the negative value of the footer's height */
  position: relative;
}
#content {
  background-color: pink;
  width: 400px;
  padding: 25px 30px 25px 30px;
  position: absolute;
  bottom: 30px;
  top: 150px;
  margin-left: 100px;
}
footer {
  margin: -30px 0 0 0;
  width: 100%;
  height: 30px;
  background-color: green;
}

<div id="wrapper">

  <header>
    <div id="logo"></div>

    <nav>
      <ul>
        <li>About</li>
        <li>Menu</li>
        <li>Specials</li>
      </ul>
    </nav>
  </header>

  <div id="content">
    content
    <br>goes
    <br>here
  </div>

</div>

<footer>footer</footer>

您可能不希望设置宽度，填充，边距等。包装器。此外，通过绝对定位，您可以将内容的底部和顶部拉到您想要的位置。

我认为这是what you are after。

Answer 3

我花了几个小时试图解决这个问题，并最终拥有一个没有黑客攻击的强大解决方案。但是，它需要CSS3，这需要一个现代的浏览器来支持它。所以，如果这个约束适合你，那么我有一个真正有效的解决方案。

http://jsfiddle.net/u9xh4z74/ 如果需要证明，请将此代码复制到您自己的文件中，因为JSFiddle实际上不会将flexbox正确地呈现为嵌入式代码。

基本上，你需要 - 将目标容器设置为100％高度，您似乎已经知道了 - 您设置的父容器显示：flex和flex-direction：vertical（您将在JSFiddle中看到我还包括执行相同操作但是跨浏览器支持所需的备用样式） - 你可以让页眉和页脚成为它们的自然高度，而不需要在这方面指定任何东西 - 在要填充剩余空间的容器中，设置flex：1。您已经设置好了！您将看到它的工作方式完全符合您的语义。同样在JSFiddle中，我包括overflow：auto来演示如果你有更多的文字而不是屏幕可以处理，滚动就像你想要的那样工作。

<div style="display:flex; flex-direction:vertical;">
    ...header(s)...
    <div style="flex: 1; overflow: auto;">
         As much content as you want.
    </div>
    ...footer(s)...
</div>

作为旁注，我尝试使用display：table来尝试做同样的事情。它也可以正常工作，除了溢出的内容不能像你期望的那样工作，而溢出的内容只是将容器扩展到内容的大小，我很确定这不是你想要的。享受！

Answer 4

我提供了一个更为通用的解决方案，因此对于阅读此答案的其他人来说更有用，并想知道如何将其应用到他们的网站。

假设您有三个div：

<div id='header'></div>
<div id='contents'></div>
<div id='footer'></div>

其中#header是固定的并且可能具有可变高度，＃content应该消耗所有剩余的垂直空间并且#footer是固定的，并且可以具有可变高度：

/* Note you could add a container div instead of using the body */
body {
  display: flex;
  flex-direction: column;
}
#header {
  flex: none;
}
#contents {
  flex: 1;
  height: 100%;
  overflow-y: scroll;
}
#footer {
  flex: none;
}

请注意，这将允许内容垂直滚动以显示其全部内容。

您可以阅读有关display：flex here。

的更多信息

Answer 5

使用display：table和display：table-row 设置高度：0表示正常div，高度：auto表示应该填充垂直空间的div。插入一个{高度：100％; overflow-y：auto}进入垂直填充，如果容器高度不应超出其预设高度。看看显示的力量：桌子！

<div style="height:300px;">
  <div style="display:table; height:100%; width:100%;border: 1px solid blue;">
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
      Hello          
    </div>
    <div style="display: table-row; height:auto; padding:2px; background-color:green;">
      <div style="height:100%; overflow: auto;">
        <div style="height: 500px"></div>
      </div>
    </div>
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
      Gbai
    </div>
  </div>
</div>

Answer 6

从100％合约高度开始，没有100％的高度。你不能这样解决它。同样使用高度+边距+填充的混合。这是直截了当的地狱。我建议你去看看这个页面布局的教程。

Div扩展到视觉填充垂直空间

6 个答案: