具有基于浏览器窗口高度的动态最小高度的 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>

Answer 1

只要找我的solution on 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>

Answer 2

我发现这是由ryanfait.com 提供的。它实际上非常简单。

为了在内容短于 window-height 时将页脚浮动到页面底部，或者当内容长于 window-height 时将页脚浮动到页面底部，请使用以下代码：

基本 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:' 仅适用于元素的主体，并为高度添加填充。

*编辑：缺少分号

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 );
});

Answer 4

根据浏览器窗口获取动态高度。使用 vh 而不是 %

例如：将以下 height: 100vh; 传递给特定的 div

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);
}

Answer 6

无需 hack 或 js。只需将以下规则应用于您的根元素：

min-height: 100%;
height: auto;

它会自动选择两者中较大的一个作为它的高度，也就是说如果内容比浏览器长，则为内容的高度，否则为浏览器的高度。这是标准的 CSS。

Answer 7

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

Answer 8

这很难做到。

有一个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 控制它的高度，而不是同样添加它，这样您可以在设计布局时考虑到它。）