css高度自适应
0
最佳答案
0
高度自适应两种方式：
1.脚本动态设定当前页面的显示高度。优点是灵活
2.通过样式定义，但是样式定义高度100％有部分父子级元素的制约关系，比如要想head高度设置100％，就得它的父级别容器高度也是100％，逐级向上。优点是全css控制，不用写脚本，缺点是，对页面布局的灵活度会受限制。
你的实现方式用overflow：hiden 溢出后隐藏，虽然貌似是高度自适应了，但是实际上还是有部分差异，如果页面出现站全屏元素时，可以看到会在边缘有缺失。比如表格，可能会出现半行的情况。这时候还需要用别的处理来补充。
收获园豆：10
很厉害，确实是这样，不过我是做导航界面，尽量不要超出，不然也没办法了。
其他回答(3)
0
header你设置啥高度？？？？？？？？？
去掉！！！！！！！
header就是一个div背景图片，去掉高度了就不显示了。
0
<html>
<head>
<style type="text/css">
html {
height:100%;
}
body {
height:100%;
border:4px solid red;
}
div.head {
width:100%;
height:250px;
border:2px solid #000000;
}
div.container{
height:100%;
}
div.content {
width:100%;
border:2px solid #707070;
}
</style>
</head>
<body>
<div class="container">
<div class='head'>Header</div>
<div class='content'>Main Content</div>
</div>
</body>
</html>
收获园豆：5
先谢谢，这个看不太明白，最后用了overflow:hidden解决的。
1
CSS中，overflow:hidden的作用是隐藏溢出
比如：<div style="width:300px;overflow:hidden" id=1><div id=2></div><div>
当ID=2的这个DIV高度设定的宽度超过了300px，那么超出的部分将自动被隐藏。
收获园豆：5