1

为什么 body、html 和 #black 的大小是视口的大小而不是文档的高度？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>

html, body{
height:100%;
}


#black{
position:absolute;
width:100%;
min-height:100%;
height:100%;
background-color:#000000;
z-index:1000;
}

#shell{
height:962px;
width:972px;
margin:0 auto;

}
</style>

</head>

<body>
<div id="black"></div>

<div id="shell">


</div>

</body>
</html>
4

3 回答 3

1

您将 body 和 html 标签设置为height: 100%. 这会将它们“锁定”到视口高度，然后#black继承该高度。您需要使用min-height：

html, body{
    min-height:100%;
}

更新：

忘了提什么。也添加这个：

body {
    position: relative;
}
于 2013-10-29T16:00:43.003 回答
0

尝试这个：

body, html {
    padding: 0;
    margin: 0;
}

编辑：

#black {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%:
}
于 2013-10-29T15:41:16.053 回答
-1

因为你这么说。说

#black {
    position: absolute;
    width: 100%;
    height: 100%;
}

确实设置了width包含块的大小。在这种情况下，包含块是viewport。height100%

当你想#black覆盖整个内容时，你必须给它一个不同的包含块。这可以通过positioningbody 

body {
    position: relative;
}

现在它覆盖了高度。要对宽度执行相同操作，您可以在 body 上设置宽度

body {
    position: relative;
    width: 972px;
}

或浮体

body {
    position: relative;
    float: left;
}

查看完整的 JSFiddle

于 2013-10-29T15:50:47.817 回答