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

[TVBee]

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

[峭沙]

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

[峭沙]

上面敲错了一个符号。。[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]

[TVBee]

[Quote=引用 3 楼 axiheyhey 的回复:]
HTML code

<div id="content"></div>
<script>
var content = document.getElementById('content');
content.style['min=height'] = document.body.clientHeight;
content.style.overflow = 'auto';
</scrip……
[/Quote]
我试一下你这个

[TVBee]

[Quote=引用 2 楼 a87345293 的回复:]
用js判断
如果div内容高度小于浏览器可见区域高度，就把div高度设成浏览器可见区域高度
否则设成auto
[/Quote]
怎么能获得div的高度呀。

[TVBee]

[Quote=引用 3 楼 axiheyhey 的回复:]
HTML code

<div id="content"></div>
<script>
var content = document.getElementById('content');
content.style['min=height'] = document.body.clientHeight;
content.style.overflow = 'auto';
</scrip……
[/Quote]
ie6不支持这个属性呀
我做出来得让大家看着都行才行呀
不过谢谢你

[TVBee]

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

[lsw645645645]

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

[KK3K2005]

min-height:用js来设置该属性
heigt:auto;

给予这样的2个设置


最后在widow.onresize事件中设置min-height的值
IE的早期版本自己hack下

[TVBee]

[Quote=引用 10 楼 kk3k2005 的回复:]
min-height:用js来设置该属性
heigt:auto;

给予这样的2个设置


最后在widow.onresize事件中设置min-height的值
IE的早期版本自己hack下
[/Quote]
ie早期的版本根本不支持min-height这个属性吧， 怎么hack?

[TVBee]

[Quote=引用 8 楼 a87345293 的回复:]
document.getElementById('content').offsetHeight
[/Quote]
不好用！

[TVBee]

[Quote=引用 9 楼 lsw645645645 的回复:]
这个不用js呀。css就可以吧
http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/
[/Quote]
你这样的话，如果内容多于100%怎么办？不要了？
我这是一个动态页面，内容没有准，多少不一定的。。。

[明悟]

document.getElementById('content').offsetHeight

[明悟]

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

肯定能达到你要的效果
我都试过了

[明悟]

其实css也能达到你要的效果

body{ height:100%}
.content{height:100%;overflow:auto}

[TVBee]

[Quote=引用 14 楼 a87345293 的回复:]
JScript code


<script type="text/javascript">
function windowHeight() {

var de = document.documentElement;

return self.innerHeight||(de && de.clientHeight)||document.body.cl……
[/Quote]
你根本没听明白我什么意思吧？
你这样高度就固定在100%了，如果内容比100%还高怎么办？
我这是一个动态的页面，根本没有准，可能低也可能高的。你这样根本不行呀，你试过ie6 7 火狐 ？
起码这三个得兼容吧

[TVBee]

[Quote=引用 15 楼 a87345293 的回复:]
其实css也能达到你要的效果

CSS code


body{ height:100%}
.content{height:100%;overflow:auto}
[/Quote]
不好用呀，你说的这我如果都不知道的话，我能傻子了

[明悟]

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

[KK3K2005]

早期ie的 height:xxx 本身就相当于
现在的
min-height:xxx
height:auto;

所以叫你hack ~~

[TVBee]

[Quote=引用 19 楼 kk3k2005 的回复:]
早期ie的 height:xxx 本身就相当于
现在的
min-height:xxx
height:auto;

所以叫你hack ~~
[/Quote]
嗯，始终还是你的答案最靠谱，我试一下哈

[TVBee]

[Quote=引用 18 楼 a87345293 的回复:]
如果内容比100%还高，肯定要有滚动条
你的意思是滚动条在哪个div上面？
或者在body上面？
这个你应该确定吧？
[/Quote]
大哥，你不感觉加个滚动条很难看？
我之所以要这样，肯定不是有背景就是有边框呗，要不我费这事干啥，你这还整个滚动条出来。。。
何况不一定有滚动条，可能多出来的就不可见了都没准
大哥你是我偶像，你败回复了