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

I have three div elements: one as a header, one as a footer, and a center content div.
the div in the center needs to expand automatically with content, but I would like a min-height such that the bottom div always at least reaches the bottom of the window, but is not fixed there on longer pages.

我有三个div元素:一个头,一个页脚,和一个中心内容div. div中心需要扩大自动与内容,但是我想这样的最小高度,底部div总是至少到达窗口的底部,而不是固定在页面。

For example:

例如:

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

7 个解决方案

#1

Just look for my solution on jsfiddle, it is based on csslayout

只要在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>

#2

I found this courtesy of ryanfait.com. It's actually remarkably simple.

我发现这是ryanfait.com提供的。它实际上是相当简单。

In order to float a footer to the bottom of the page when content is shorter than window-height, or at the bottom of the content when it is longer than window-height, utilize the following code:

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

Basic HTML structure:

基本的HTML结构:

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

Note: Nothing should be placed outside the '#content' and '#footer' divs unless it is absolutely positioned.
Note: Nothing should be placed inside the '#push' div as it will be hidden.

注意:任何东西都不应该放在'#content'和'#footer' divs之外，除非它是绝对定位的。注意:不应该将任何东西放在“#push”div中，因为它将被隐藏。

And the CSS:

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

To make headers or footers span the width of a page, you must absolutely position the header.
Note: If you add a page-width header, I found it necessary to add an extra wrapper div to #content. The outer div controls horizontal spacing while the inner div controls vertical spacing. I was required to do this because I found that 'min-height:' works only on the body of an element and adds padding to the height.

要使页眉或页脚跨越页面的宽度，必须确定页眉的位置。注意:如果您添加页面宽度的标题，我发现有必要向#content添加额外的div包装。外div控制水平间距，而内div控制垂直间距。我被要求这样做，因为我发现“最小高度:”只适用于元素的主体，并增加了填充。

*Edit: missing semicolon

*编辑:失踪的分号

#3

If #top and #bottom have fixed heights, you can use:

如果#顶部和#底部有固定的高度，您可以使用:

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

---

update

If you want #central to stretch down, you could:

如果你想让#central向下伸展，你可以:

• Fake it with a background on parent;
• 用父母的背景假装;
• Use CSS3's (not widely supported, most likely) calc();
• 使用CSS3的calc(很可能没有得到广泛支持);
• Or maybe use javascript to dynamically add min-height.
• 或者可以使用javascript动态添加最小高度。

With calc():

与钙():

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

With jQuery it could be something like:

使用jQuery，它可以是这样的:

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

#4

No hack or js needed. Just apply the following rule to your root element:

不需要黑客或js。只需对根元素应用以下规则:

min-height: 100%;
height: auto;

It will automatically choose the bigger one from the two as its height, which means if the content is longer than the browser, it will be the height of the content, otherwise, the height of the browser. This is standard css.

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

#5

As mentioned elsewhere, the CSS function calc() can work nicely here. It is now mostly supported. You could use like:

正如其他地方提到的，CSS函数calc()可以在这里很好地工作。它现在基本上得到了支持。您可以使用:

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

#6

You propably have to write some JavaScript, because there is no way to estimate the height of all the users of the page.

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

#7

It's hard to do this.

这很难做到。

There is a min-height: css style, but it doesn't work in all browsers. You can use it, but the biggest problem is that you will need to set it to something like 90% or numbers like that (percents), but the top and bottom divs use fixed pixel sizes, and you won't be able to reconcile them.

css样式有一个最小的高度，但是它不能在所有浏览器中工作。您可以使用它，但最大的问题是您需要将它设置为大约90%或类似的数字(percents)，但是顶部和底部div使用固定的像素大小，您无法协调它们。

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

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

I know a and c have fixed heights, but I rather measure them in case they change later.

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

Also, I am measuring the height of b (I don't want to make is smaller after all), but if there is an image in there that did not load the height can change, so watch out for things like that.

另外，我正在测量b的高度(我不想让它变得更小)，但是如果有一个图像没有加载，那么高度就会改变，所以要注意这样的事情。

It may be safer to do:

这样做可能更安全:

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

Which simply adds an element into that div with the correct height - that effectively acts as min-height even for browsers that don't have it. (You may want to add the element into your markup, and then just control the height of it via javascript instead of also adding it that way, that way you can take it into account when designing the layout.)

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