CSS 100％高度身体和元素 [英] CSS 100 percent height body and element
问题描述
我有一个问题，使我的一个元素100％在100％的整体布局。
我尝试了不同的定位解决方案，隐藏内容在底部的页脚后面浮动，或内容结束在页脚后面，并在页脚后面继续。
这是我的页面布局。
<！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/xhtmllang =zh-CN>
< head>
< style>
* {margin：0}
html，body {margin：0; padding：0; height：100％}
.wrapper {position：relative; margin：0 auto -200px; height：auto！important;高度：100％; min-height：100％}
.container {width：930px; margin：0 auto; text-align：left}
.right {float：right; width：680px;背景：#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>
页面的布局是100％高度，页脚在底部工作，它只是div类名的内容，我想要100％，如果内容到达页脚，而不消失，将页脚进一步向下。
任何帮助最感激。 / p>
http：// img686。 imageshack.us/img686/7725/screenshotbj.png
回答animuson：实际上需要以下代码IE6支持：
min-height：100％; / * real browsers * /
height：auto！important; / * real browsers * /
height：100％; / * IE6：视为最小高度* /
IE6不了解！important ，但它将高度视为最小高度。所以要支持IE6和现代浏览器，你必须使用完全相同的代码（顺序很重要）。
I am having an issue making one of my elements 100% within an overall layout that is 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.
Any help most appreciated.
http://img686.imageshack.us/img686/7725/screenshotbj.png
Answering animuson: actually the following code is necessary for IE6 support:
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).
这篇关于CSS 100％高度身体和元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http：// img686。 imageshack.us/img686/7725/screenshotbj.png](\"http://img686.imageshack.us/img686/7725/screenshotbj.png\"){kind=link}
