使Div高度为屏幕的100%

时间:2010-11-25 18:51:39

标签: html css dom height

我一直在阅读所有100%div高度讨论,我找不到简单的解决方案。如何让我的div占据屏幕的所有垂直高度?

这是我的代码:

CSS

#mother {
    width:   100%;  
    margin: 0 auto; 
    z-index: 1;
}
#stripe_wrap {
    width: 1053px;
    min-height: 500px;
    margin: 0 auto;
    background: lime; 
}
#stripe1 {
    width: 39px;
    min-height: 500px;
    margin: 0px 0px 0px 0px;
    background: #000;
    float: left;
}
#stripe2 {
    width: 39px;
    min-height: 500px;
    margin: 0px 0px 0px 0px; 
    background:#000;
    float: right;
}

HTML

<div id="mother" style="overflow-x: hidden;">
    <div id="stripe_wrap">

        <div id="stripe1"></div>
        <div id="stripe2"></div>

    </div>
</div>

3 个答案:

答案 0 :(得分:4)

您必须将高度的<body>标记设为100%,否则会垂直截断以适合内容。

还要确保将<body>的边距设置为0px,否则它将变为100%_of_visible_area + margin,从而产生垂直滚动条。

答案 1 :(得分:2)

html, body {padding: 0px; margin: 0px; height: 100%;}

http://jsfiddle.net/kEv8F/ - 我的版本。

http://jsfiddle.net/kEv8F/ - 你的版本。

这是你的意思吗?

答案 2 :(得分:1)

尝试为height:100%<body>设置<html> 如果您的页面上除了此div之外什么都没有,那么没有这些设置,100%高度将是0px。