基于浏览器窗口高度的动态最小高度的 div

Question

我有三个 div 元素：一个作为页头，一个作为页脚，以及一个中心内容的 div。
中心的 div 需要根据内容自动扩展，但我想设置一个 min-height，以使底部的 div 至少达到窗口底部，但在较长的页面上不固定在那里。

例如：

<div id="a" style="height: 200px;">
  <p>This div should always remain at the top of the page content and should scroll with it.</p>
</div>
<div id="b">
  <p>This is the div in question. On longer pages, this div needs to behave normally (i.e. expand to fit the content and scroll with the entire page). On shorter pages, this div needs to expand beyond its content to a height such that div c will reach the bottom of the viewport, regardless of monitor resolution or window size.
</div>
<div id="c" style="height: 100px;">
  <p>This div needs to remain at the bottom of the page's content, and scroll with it on longer pages, but on shorter pages, needs to reach the bottom of the browser window, regardless of monitor resolution or window size.</p>
</div>

- Bryan

Answer 1

请查看我在 jsfiddle 上的解决方案，它基于csslayout

html,
body {
  margin: 0;
  padding: 0;
  height: 100%; /* needed for container min-height */
}
div#container {
  position: relative; /* needed for footer positioning*/
  height: auto !important; /* real browsers */
  min-height: 100%; /* real browsers */
}
div#header {
  padding: 1em;
  background: #efe;
}
div#content {
  /* padding:1em 1em 5em; *//* bottom padding for footer */
}
div#footer {
  position: absolute;
  width: 100%;
  bottom: 0; /* stick to bottom */
  background: #ddd;
}

<div id="container">

  <div id="header">header</div>

  <div id="content">
    content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
  </div>

  <div id="footer">
    footer
  </div>
</div>

- huston007

---

你注释掉了页脚的填充，我不得不重新添加以适应页脚区域。最终我使用了 padding-bottom: 50px，因为我的页脚高度为50像素。 - SyntaxRules

这两个属性：height: auto !important; /* real browsers */; min-height: 100%; 真的很好用！谢谢。 - Jeaf Gilbert

Answer 2

我是从ryanfait.com上找到这个技巧的。它其实非常简单。

为了在内容比窗口高度短时将页脚浮动到页面底部，或者在内容比窗口高度长时将其放置在内容底部，请使用以下代码：

基本的HTML结构：

<div id="content">
  Place your content here.
  <div id="push"></div>
</div>
<div id="footer">
  Place your footer information here.
</footer>

注意：除非它是绝对定位的，否则不应将任何内容放置在“#content”和“#footer” div之外。
注意：不应将任何内容放置在“#push” div内，因为它将被隐藏。

还有 CSS：

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#content {
  min-height: 100%;
  height: auto !important; /*min-height hack*/
  height: 100%;            /*min-height hack*/
  margin-bottom: -4em;     /*Negates #push on longer pages*/
}
#footer, #push {
  height: 4em;
}

为了使页眉或页脚跨越整个页面，您必须对页眉进行绝对定位。
注意：如果添加一个占据整个页面宽度的页眉，我发现需要在#content中添加一个额外的包装div。外部div控制横向间距，而内部div控制纵向间距。我需要这样做是因为我发现 'min-height:' 只适用于元素的主体，并且会向高度添加填充。

*编辑：缺少分号

- Bryan

---

为什么不同时包含一个演示链接并将其称为sticky-footer呢？http://ryanfait.com/sticky-footer/ - hugo der hungrige

最好使用min-height而不是height来设置html，body的高度，否则如果内容溢出窗口大小，它将无法将背景拉伸到网站的完整高度。 - van_folmert

这将显示页脚，即使页面内容长于屏幕。有时，这不是所需的行为。 - James John McGuire 'Jahmic'

链接已失效，因为拥有该博客的网页设计师已经去世，愿他安息。 - Hakan Fıstık

Answer 3

如果 #top 和 #bottom 有固定的高度，您可以使用以下代码：

#top {
    position: absolute;
    top: 0;
    height: 200px;
}
#bottom {
    position: absolute;
    bottom: 0;
    height: 100px;
}
#central {
    margin-top: 200px;
    margin-bot: 100px;
}

---

更新

如果你想让#central的高度拉伸，你可以采用以下方法:

• 在父元素上使用背景来伪造高度;
• 使用CSS3的（不被广泛支持，可能性较小）calc()函数;
• 或者使用JavaScript动态添加min-height属性。

使用calc()函数:

#central {
    min-height: calc(100% - 300px);
}

使用jQuery可以这样实现：

$(document).ready(function() {
  var desiredHeight = $("body").height() - $("top").height() - $("bot").height();
  $("#central").css("min-height", desiredHeight );
});

- ANeves

---

但这不会超出#central的内容...对吧？ - Bryan

不，它做了你想要的，但它没有拉伸 #central。我会更新答案。 - ANeves

Answer 4

为了根据浏览器窗口获取动态高度，使用vh代替%

例如：将以下样式height: 100vh;传递给指定的div元素。

- Sahil Ralkar

---

这不是正确的。显然，操作员希望根据窗口的高度和某些其他限制来调整其内容的大小。 - sjsam

Answer 5

正如其他地方所提到的，CSS函数calc()在这里可以很好地工作。它现在得到了广泛支持。你可以像这样使用:

.container
{
    min-height: 70%;
    min-height: -webkit-calc(100% - 300px);
    min-height: -moz-calc(100% - 300px);
    min-height: calc(100% - 300px);
}

- Jahmic

---

calc方法真的很有用。谢谢分享。 - Yasin Yörük

Answer 6

不需要黑客或 JavaScript。只需将以下规则应用于您的根元素：

min-height: 100%;
height: auto;

它会自动从两个中选择较大的一个作为其高度，这意味着如果内容比浏览器更长，则高度将是内容的高度，否则将是浏览器的高度。这是标准的CSS。

- streaver91

---

当一个 div 嵌套在另一个具有固定高度的 div 中时，它在这里无法工作。这是因为 100% 是相对于父 div 的。 - Bernardo Dal Corno

Answer 7

这很难做到。

有一个min-height:的CSS样式，但它并不适用于所有浏览器。你可以使用它，但最大的问题是你需要将其设置为类似于90%或百分比数字之类的东西，但顶部和底部的div使用固定像素大小，你将无法协调它们。

 var minHeight = $(window).height() -
                 $('#a').outerHeight(true) -
                 $('#c').outerHeight(true));

if($('#b').height() < minHeight) $('#b').height(minHeight);

我知道a和c的高度是固定的，但我宁愿测量它们以防它们以后发生变化。

此外，我正在测量b的高度（毕竟我不想让它变小），但如果其中有一张图片没有加载，高度可能会发生变化，所以要注意这样的情况。

最好做到：

$('#b').prepend('<div style="float: left; width: 1px; height: ' + minHeight + 'px;">&nbsp;</div>');

这只是简单地向那个 div 元素中添加一个具有正确高度的元素 - 这有效地充当了最小高度，即使浏览器没有它也能如此。（您可以将该元素添加到标记中，然后仅通过javascript控制其高度，而不必以同样的方式添加它，这样您在设计布局时就可以考虑它。）

- Ariel

---

你可以使用固定长度，当然可以。但是它无法动态地适应屏幕大小。 - Ariel

所以我找到了这个例子[http://peterned.home.xs4all.nl/examples/csslayout1.html]，它完全符合我的要求，使用纯CSS。它非常简单...我不知道为什么我没有看到它。现在我只需要弄清楚如何修改它，使页眉和页脚跨越整个页面的宽度... - Bryan

这很聪明！它取决于不是所有地方都起作用的min-height（但是当它不起作用时会非常好地降级）。 - Ariel

是的，该死的IE和它缓慢到死的实现新技术的方式。有没有关于如何实现整个页面页眉/页脚的建议？我已经修改了代码使其工作，但是在我的布局中，实际的中心div似乎没有扩展...但页脚确实达到了我想要的效果！ - Bryan

尝试使用我的方法，添加一个高度合适的窄透明图像，强制使div至少增长到该高度。将图像的css设置为height: 100%;。 - Ariel

Answer 8

你可能需要编写一些JavaScript，因为无法估计页面所有用户的高度。

- KodeFor.Me

---

JavaScript或jQuery都可以。有些页面并不是很长，在我的大屏幕上最大化，如果页脚实际上也在窗口底部而不仅仅是页面底部，看起来会更好。特别是对于较小的页面。 - Bryan