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

只需查找我的 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 提供的。实际上非常简单。

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

基本 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;
}

---

update

如果您希望 #central 向下拉伸，您可以：

• Fake it有父母背景；
• 使用 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;"> </div>');

只需将一个具有正确高度的元素添加到该 div 中 - 即使对于没有它的浏览器，它也可以有效地充当最小高度。 （您可能想要将元素添加到标记中，然后只需通过 javascript 控制它的高度，而不是也以这种方式添加它，这样您就可以在设计布局时考虑到它。）