CSS 具有基于浏览器窗口高度的动态最小高度的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7527152/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
div with dynamic min-height based on browser window height
提问by Bryan
I have three divelements: one as a header, one as a footer, and a center content div.
the divin the center needs to expand automatically with content, but I would like a min-heightsuch that the bottom divalways at least reaches the bottom of the window, but is not fixed there on longer pages.
我有三个div元素：一个作为页眉，一个作为页脚，一个中心内容div。
将div在该中心需要与内容自动扩展，但我想一个min-height，使得底部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>
采纳答案by huston007
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>回答by Bryan
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:
为了在内容短于 window-height 时将页脚浮动到页面底部，或者当它长于 window-height 时将页脚浮动到页面底部，请使用以下代码：
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' div 之外。
注意： '#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 控制垂直间距。我被要求这样做是因为我发现 'min-height:' 仅适用于元素的主体并为高度添加填充。
*Edit: missing semicolon
*编辑：缺少分号
回答by ANeves
If #topand #bottomhave fixed heights, you can use:
如果#top并且#bottom具有固定的高度，您可以使用：
#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 #centralto stretch down, you could:
如果你想#central向下伸展，你可以：
- Fake it with a background on parent;
- Use CSS3's (not widely supported, most likely)
calc(); - Or maybe use javascript to dynamically add
min-height.
- 以父母为背景伪造它；
- 使用 CSS3（没有得到广泛支持，很可能）
calc()； - 或者也许使用 javascript 动态添加
min-height.
With calc():
与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 );
});
回答by streaver91
No hack or js needed. Just apply the following rule to your root element:
不需要 hack 或 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。
回答by Jahmic
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);
}
回答by Sahil Ralkar
to get dynamic height based on browser window. Use vhinstead of %
根据浏览器窗口获取动态高度。使用vh而不是%
e.g: pass following height: 100vh;to the specific div
例如：通过以下高度：100vh；到特定的div
回答by Ariel
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.
有一个min-height:css 样式，但它不适用于所有浏览器。您可以使用它，但最大的问题是您需要将其设置为 90% 或类似的数字（百分比），但是顶部和底部 div 使用固定的像素大小，您将无法协调他们。
var minHeight = $(window).height() -
$('#a').outerHeight(true) -
$('#c').outerHeight(true));
if($('#b').height() < minHeight) $('#b').height(minHeight);
I know aand chave 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;"> </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 中 - 即使对于没有它的浏览器，它也有效地充当 min-height 。（您可能希望将元素添加到您的标记中，然后只需通过 javascript 控制它的高度，而不是以这种方式添加它，这样您就可以在设计布局时考虑到它。）
回答by Merianos Nikos
You propably have to write some JavaScript, because there is no way to estimate the height of all the users of the page.
您可能必须编写一些 JavaScript，因为无法估计页面所有用户的高度。
