如何实现层的高度适合（100%和随内容选择）

Question

想实现效果
如果内容撑起的高度大于浏览器可见区域的高度，以内容撑起高度为准。也就是auto
如果内容高度小于浏览器可见区域的高度，以浏览器可见区域的高度为准，也就是100% 

Answer 1

我暂时用了一个很雷人的方法
<div class=wrap>
<div class=zero></div>
<div class=container></div>
</div>
然后我把zero设成宽度为0，用js获取浏览器可见区域高度，赋值给zero，使其撑起外层，然后边框设给外层。。
太雷人，谁有好方法？

Answer 2

用js判断
如果div内容高度小于浏览器可见区域高度，就把div高度设成浏览器可见区域高度
否则设成auto

Answer 3

<div id="content"></div>
<script>
var content = document.getElementById('content');
content.style['min=height'] = document.body.clientHeight;
content.style.overflow = 'auto';
</script>

Answer 4

上面敲错了一个符号。。[code=HTML]<div id="content"></div>
<script>
var content = document.getElementById('content');
content.style['min-height'] = document.body.clientHeight;
content.style.overflow = 'auto';
</script>/code]

Answer 5

怎么能获得div的高度呀。

Answer 6

document.getElementById('content').offsetHeight

Answer 7

这个不用js呀。css就可以吧
http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/

Answer 8

min-height:用js来设置该属性
heigt:auto;给予这样的2个设置
最后在widow.onresize事件中设置min-height的值
IE的早期版本自己hack下

Answer 9

ie早期的版本根本不支持min-height这个属性吧， 怎么hack?

Answer 10

<script type="text/javascript">
function windowHeight() {    var de = document.documentElement;    return self.innerHeight||(de && de.clientHeight)||document.body.clientHeight;}
window.onload=window.onresize=function(){
var hh=document.getElementById('content').offsetHeight;
var wh=windowHeight();
if(hh<wh){
document.getElementById('content').style.height=wh;
}
else{
document.getElementById('content').style.height='auto';
}
}
</script>
你再加上：
body{ height:100%}肯定能达到你要的效果
我都试过了

Answer 11

其实css也能达到你要的效果body{ height:100%}
.content{height:100%;overflow:auto}

Answer 12

如果内容比100%还高，肯定要有滚动条
你的意思是滚动条在哪个div上面？
或者在body上面？
这个你应该确定吧？

Answer 13

早期ie的 height:xxx 本身就相当于 
现在的
min-height:xxx 
height:auto;所以叫你hack ~~