绝对DIV高度100%

Question

绝对DIV高度100%

在过去的几个小时里,我一直在研究这个问题,搜索网络和stackoverflow并没有得到太多的支持.如何制作#gradient和#holes填写整个页面？

我在Safari中使用了Inspect Element功能,当我突出显示body元素时,它不会填满整个窗口.
替代文字http://img534.imageshack.us/img534/9955/screenshot20100201at215.png

HTML:

<body>

    <div id="gradient"></div>
    <div id="holes"></div>

    <div id="header">Header Text</div>
</body>

Run Code Online (Sandbox Code Playgroud)

CSS:

html, body {
    height:100%;

    margin:0;
    padding:0;
}

body {
    background-image:url(../Images/Tile.png);
    background-color:#7D7D7D;
    background-repeat:repeat;
}

#gradient {
    background-image:url(../Images/Background.png);
    background-repeat:repeat-x;

    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    right:0px;
}

#holes {
    background-image:url(../Images/Holes.png);
    background-repeat:repeat;

    position:absolute;
    top:2px;
    left:2px;
    height:100%;
    right:0px;
}

#header {
    background-image:url(../Images/Header.png);
    background-repeat:repeat-x;

    position:absolute;
    top:0px;
    left:0px;
    width:100%;

    padding-top:24px;
    height:49px; /* 73 - padding */

    color:rgb(113, 120, 128);
    font-family:Helvetica, Arial;
    font-weight:bold;
    font-size:24px;
    text-align:center;
    text-shadow:#FFF 0px 1px 0px;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ada*_*dam 38

请注意,以百分比指定的高度属性是根据包含块来计算的 ..它不必是直接的祖先 - "定位框的包含块由最近的 定位祖先建立,或者如果没有存在,初始包含块 ".我打赌这就是提问者的情况,因为没有定位的祖先(设置为或者).position:relativeabsolute

因此"包含块"解析为初始包含块,该块与视口(窗口)的尺寸相对应.设置position:relative为body将考虑body高度并完全拉伸绝对定位的内容body.

更多关于包含块的信息.

Answer 2

Dou*_*lin 16

我遇到了同样的问题.通过改变位置来固定它:绝对到位置:固定.

Answer 3

pro*_*son 3

嗯，在我看来，包含所有内容的元素都是浮动的。如果是的话，除非它被清除，否则它不会扩展身体。

归档时间：	15 年，10 月前
查看次数：	57883 次
最近记录：	6 年，6 月前