use*_*511 2 html css layout css3
我正在尝试创建一个占用页面高度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>
编辑:我确实尝试了一个margin-top:-50px,填充顶部:之前的内容div为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;
}