CSS 100% 高度主体和元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2982180/
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
CSS 100 percent height body and element
提问by Tim
I am having an issue making one of my elements 100% within an overall layout that is 100%.
我在使我的元素之一在 100% 的整体布局中 100% 出现问题。
I have tried different positioning solutions and I either end up with hidden content the floats behind the footer at the bottom, or the content ends up going behind the footer, and carrys on after the footer.
我尝试了不同的定位解决方案，我要么最终在底部的页脚后面浮动隐藏内容，要么内容最终在页脚后面，并在页脚之后继续。
Here is what I have for the page layout.
这是我的页面布局。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<style>
*{margin:0}
html,body{margin:0; padding:0; height:100%}
.wrapper{position:relative; margin:0 auto -200px; height:auto !important; height:100%; min-height:100%}
.container{width:930px; margin:0 auto; text-align:left}
.right{float:right; width:680px; background:#FFF; margin:60px 10px 0 0; padding:0}
.left{float:left; width:240px}
.content{padding:10px}
.footer{position:absolute; width:100%}
.footer,.push{height:200px}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div id="left">
left
</div>
<div class="right">
<div class="content">
content
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
The layout for the page being 100% height and footer at the bottom works it just the div with the class name content that I would like to be 100% as well and push the footer further down if the content reaches the footer and not disappear.
页面的布局为 100% 高度，底部的页脚仅适用于类名称内容的 div，我也希望 100% 为 div，如果内容到达页脚并且不会消失，则将页脚进一步向下推。
Any help most appreciated.
任何帮助最受赞赏。
回答by AMilassin
Answering animuson: actually the following code is necessary for IE6 support:
回答animuson：实际上下面的代码是IE6支持所必需的：
min-height: 100%; /* real browsers */
height: auto !important; /* real browsers */
height: 100%; /* IE6: treated as min-height*/
IE6 doesn't understand !important, but it does treat height as min-height. So to support both IE6 and modern browser you have to use the exact same code (order is important).
IE6 不理解!important，但它确实将高度视为最小高度。因此，要同时支持 IE6 和现代浏览器，您必须使用完全相同的代码（顺序很重要）。
回答by Max Ruf
The correct css should look like this:
正确的 css 应如下所示：
<style type="text/css" media="screen">
html,body
{
margin:0; padding:0; height:100%;
}
.wrapper
{
position:relative;
min-height:100%;
/*background: #fef;*/
}
.container
{
margin: 0 auto;
width: 930px;
padding: 0 0 200px 0; /*200 pixels at the bottom, to stay over the footer*/
/*background: #fff; */
}
.left /* This was one cause. Old line: <div id="left">, new line: <div class="left"> */
{
float: left;
width: 240px;
/*background: #efe;*/
}
.right
{
float: left;
width: 690px;
/*background: #efa;*/
}
.right .content
{
padding: 10px;
}
.clear
{
clear: both;
}
.footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
/*background: #eff;*/
}
</style>
I'm sure this will help you.
我相信这会帮助你。
<div class="wrapper">
<div class="container">
<div class="left">
left
</div>
<div class="right">
<div class="content">
content
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer">
footer
</div>
</div>
This will look like you wanted to have it. The footer is at the bottom, everytime, just as you wanted to have it :) Hope it helps!
这看起来像是你想要的。页脚每次都在底部，就像您想要的那样:) 希望它有所帮助！
回答by LBridge
Another solution is to use javascript (obviously not the cleanest way but in some cases it can be useful).
另一种解决方案是使用 javascript（显然不是最干净的方式，但在某些情况下它可能有用）。
Using jQuery:
使用jQuery：
//Get height
var divHeight = $('#div').height();
//Apply css rule
$('#anotherDiv').css('height', divHeight);
回答by TheGeekYouNeed
Without being able to look at the code until a little later, I'd suggust putting the class "clearfix" onto the div that isn't fully expandning with the white.
直到稍后才能查看代码，我建议将类“clearfix”放在未完全扩展为白色的 div 上。
Hereis where you can get a good definition of what clearfix is, and a definition for the css.
在这里，您可以很好地了解 clearfix 是什么，以及对 css 的定义。
回答by theogrost
Quite late answer, however it might be useful for others. You can simply use 100vh (vh is viewport-height unit)
很晚的答案，但它可能对其他人有用。您可以简单地使用 100vh（vh 是视口高度单位）
回答by Tim
Found my own solution based on a lead that Cen wrote; searched 100% Layout with Faux Columns and got this http://www.savio.no/examples/three-column-layout-6.asp
根据岑写的线索找到了我自己的解决方案；用人造柱搜索 100% 布局并得到这个http://www.savio.no/examples/three-column-layout-6.asp
With a little tweaking and splicing up my layout different I came up with the following solution which works across all browsers.
通过稍微调整和拼接不同的布局，我想出了以下适用于所有浏览器的解决方案。
回答by Marcus
In your code footer has position:absolute but the actual position (eg. bottom: 30px;) is not given. Also, if you want the .content or .push to affect the .footer position, they would have to be in the same flow (eg. both position:static;). Giving footer position:absolute by definition takes the footer positioning from the normal flow, so this is incompatible with the objective.
在您的代码页脚中有 position:absolute 但未给出实际位置（例如底部：30px;）。此外，如果您希望 .content 或 .push 影响 .footer 位置，则它们必须处于相同的流程中（例如，两个位置：静态；）。给出页脚位置：绝对定义从正常流中获取页脚位置，因此这与目标不符。
I assume what you're trying to do is get a page that is 100% even with little content, and a footer that's always on the bottom of the page/screen.
我假设您想要做的是获得一个即使内容很少也是 100% 的页面，以及一个始终位于页面/屏幕底部的页脚。
FooterStickAlt is a good cross-browser solution to achieve that. http://www.themaninblue.com/experiment/footerStickAlt/
FooterStickAlt 是一个很好的跨浏览器解决方案来实现这一点。 http://www.themaninblue.com/experiment/footerStickAlt/
