我正在尝试创建一个占页面高度 100% 的页面，而不显示滚动条。但是，我想在其上方添加一个标题，当我这样做时，由于额外的高度，会出现一个滚动条。我尝试用负底部边距来补偿额外的长度，但这似乎并没有改变长度。如何防止此布局中出现滚动条？
这是我的代码:
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: orange;
}
div#header {
background-color: red;
height: 50px;
}
div#content {
background-color: yellow;
height: 100%;
margin-bottom: -50px;
}
</style>
</head>
<body>
<div id="header">
HEADER
</div>
<div id="content">
Test Content
</div>
</body>
</html>
编辑:我之前确实在内容 div 上尝试了 margin-top: -50px 和 padding-top: 50px 。然而，它的行为并不像我预期的那样，因为即使我设置了 z-index，内容也会与标题重叠。
最佳答案
还有另一种方法
* {
margin: 0;
padding: 0;
}
body {
background-color: orange;
}
div#header {
background-color: red;
height: 50px;
}
div#content {
background-color: yellow;
top:50px;
bottom:0px;
width:100%;
position:absolute;
}
关于html - 如何让内容 div 跨越页面的剩余高度而不滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7327663/