html - div 展开以可视方式填充垂直空间

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>

score 8 · Accepted Answer

关于 height: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 索引来实现。这是我发现的唯一动态填充垂直高度的解决方案。

score 7 · Accepted Answer

尝试将您的 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>

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

这就是你所追求的，我想。

score 6 · Accepted Answer

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

假设你有三个 div：

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

其中#header 是固定的并且可能具有可变高度，#contents 应该消耗所有剩余的垂直空间并且#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的更多信息。

score 5 · Accepted Answer

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

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

基本上，您需要 - 将目标容器设置为 100% 高度，您似乎已经知道了 - 您设置的父容器 display: 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 来做同样的事情。它也可以正常工作，只是溢出的内容不像您期望的那样工作，而是溢出的内容只是将容器扩展为内容的大小，我很确定这不是您想要的。享受！

score 1 · Accepted Answer

使用 display:table 和 display:table-row 为普通 div 设置 height:0 ，为应该填充垂直空间的 div 设置 height:auto 。插入一个具有 {height:100%; 的 div 如果容器高度不应超出其预设高度，则溢出-y：auto} 到垂直填充中。看看 display:table 的威力！

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

score -5 · Accepted Answer

没有 100% 高度与 100% 连续高度完全一致。你不能这样解决。同样，同时使用高度 + 边距 + 填充的组合。这是直通地狱的方式。我建议您查看正在解决此页面布局的教程。

html - div 展开以可视方式填充垂直空间

6 回答 6

Related

Reference