body设置高度100%,现在有个header,设置的固定高度,加上去之后就出现滚动条了,怎么设置body的高度为页面高度减去header的高度,不适用js的前提下。
三栏布局,各自的高度设置的100%,body也是100%。
高度自适应两种方式:
1.脚本动态设定当前页面的显示高度。优点是灵活
2.通过样式定义,但是样式定义高度100%有部分父子级元素的制约关系,比如要想head高度设置100%,就得它的父级别容器高度也是100%,逐级向上。优点是全css控制,不用写脚本,缺点是,对页面布局的灵活度会受限制。
你的实现方式用overflow:hiden 溢出后隐藏,虽然貌似是高度自适应了,但是实际上还是有部分差异,如果页面出现站全屏元素时,可以看到会在边缘有缺失。比如表格,可能会出现半行的情况。这时候还需要用别的处理来补充。
很厉害,确实是这样,不过我是做导航界面,尽量不要超出,不然也没办法了。
header你设置啥高度?????????
去掉!!!!!!!
header就是一个div背景图片,去掉高度了就不显示了。
<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>
先谢谢,这个看不太明白,最后用了overflow:hidden解决的。
CSS中,overflow:hidden的作用是隐藏溢出
比如:<div style="width:300px;overflow:hidden" id=1><div id=2></div><div>
当ID=2的这个DIV高度设定的宽度超过了300px,那么超出的部分将自动被隐藏。