首页 新闻 会员 周边 捐助

css高度自适应

0
悬赏园豆:20 [已解决问题] 解决于 2013-04-29 18:50

body设置高度100%,现在有个header,设置的固定高度,加上去之后就出现滚动条了,怎么设置body的高度为页面高度减去header的高度,不适用js的前提下。

 

三栏布局,各自的高度设置的100%,body也是100%。

css
清海扬波的主页 清海扬波 | 小虾三级 | 园豆:825
提问于:2013-04-26 16:35
< >
分享
最佳答案
0

高度自适应两种方式:

1.脚本动态设定当前页面的显示高度。优点是灵活

2.通过样式定义,但是样式定义高度100%有部分父子级元素的制约关系,比如要想head高度设置100%,就得它的父级别容器高度也是100%,逐级向上。优点是全css控制,不用写脚本,缺点是,对页面布局的灵活度会受限制。

你的实现方式用overflow:hiden 溢出后隐藏,虽然貌似是高度自适应了,但是实际上还是有部分差异,如果页面出现站全屏元素时,可以看到会在边缘有缺失。比如表格,可能会出现半行的情况。这时候还需要用别的处理来补充。

收获园豆:10
邢少 | 专家六级 |园豆:10926 | 2013-04-28 09:48

很厉害,确实是这样,不过我是做导航界面,尽量不要超出,不然也没办法了。

清海扬波 | 园豆:825 (小虾三级) | 2013-04-28 13:32
其他回答(3)
0

header你设置啥高度?????????

去掉!!!!!!!

丫的 | 园豆:1575 (小虾三级) | 2013-04-26 16:55

header就是一个div背景图片,去掉高度了就不显示了。

支持(0) 反对(0) 清海扬波 | 园豆:825 (小虾三级) | 2013-04-26 17:00
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
Yu | 园豆:12990 (专家六级) | 2013-04-26 17:38

先谢谢,这个看不太明白,最后用了overflow:hidden解决的。

支持(0) 反对(0) 清海扬波 | 园豆:825 (小虾三级) | 2013-04-26 21:35
1

CSS中,overflow:hidden的作用是隐藏溢出
比如:<div style="width:300px;overflow:hidden" id=1><div id=2></div><div>
当ID=2的这个DIV高度设定的宽度超过了300px,那么超出的部分将自动被隐藏。

收获园豆:5
不负春光,努力生长 | 园豆:1382 (小虾三级) | 2013-04-26 22:34
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册