html - CSS - HTML 标签不是页面的 100%

标签 html css

为什么 body、html 和 #black 的大小是根据视口(viewport)的大小而不是文档的高度来调整的?

<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>

最佳答案

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

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

更新:

忘了说一件事。也添加这个:

body {
    position: relative;
}

关于html - CSS - HTML 标签不是页面的 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19662789/

相关文章:

java - 从 JSP 读取不同的参数到 Servlet

html - 如何将图像添加到输入表单的右侧并使其用作搜索按钮

html - 使用 flexbox 拉伸(stretch)内容以扩展到整个视口(viewport)

javascript - JQuery 将两个图像设置为与另一个图像相同的位置

html - CSS - Nav a 标签在 Safari 中有下划线

javascript - 使用 Bootstrap 验证复选框

html - Bootstrap 4 网格 - .col-断点与 .col-number

html - 列表项 li 悬停样式在页面上不起作用

html - 页面导航不会停留在一行

html - 为什么即使将宽度设置为 100%,我的网站边缘仍然存在间隙?