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

＆＃13;

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

＆＃13;

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

＆＃13;

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

更新

如果您希望#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 代替％

例如：传递以下高度：100vh; 到特定的div

Answer 5

不需要hack或js。只需将以下规则应用于根元素：

min-height: 100%;
height: auto;

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

Answer 6

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

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控制它的高度，而不是以这种方式添加它，这样您在设计布局时就可以将其考虑在内。）

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

7 个答案:

更新