我有几个 div，其中一个叠加在另外两个之上。所以对于底部的 div，我使用了类似这样的东西(CSS):
position:relative;
top:-200px;
但是现在我在页面底部剩下 200 像素是空的。我如何削减/删除溢出？ 完整的 CSS 代码是:
div.headertop
{
background-image:url('images/bkb.png');
background-repeat:repeat;
width: 1000px;
height:200px;
background-color: black;
color:white;
display: block;
margin-left: auto;
margin-right: auto;
}
div.headerbottom
{
background-image:url('images/bkg.png');
background-repeat:repeat;
background-position:bottom;
width: 1000px;
height:125px;
position:relative;
margin-left: auto;
margin-right: auto;
}
div.headerlogo
{
background-image:url('images/bkw.png');
background-repeat:repeat;
width: 800px;
height:200px;
position:relative;
top:-200px;
margin-left: auto;
margin-right: auto;
}
div.content
{
background-image:url('images/bkg.png');
background-repeat:repeat;
background-position:top;
width: 1000px;
min-height:500px;
position:relative;
top:-200px;
margin-left: auto;
margin-right: auto;
}
div.footer
{
background-image:url('images/bkb.png');
background-repeat:repeat;
width: 1000px;
height:100px;
line-height:100px;
background-color: black;
position:relative;
top:-200px;
color:white;
display: block;
margin-left: auto;
margin-right: auto;
color: white;
text-align: center;
}
HTML 主体代码:
<body>
<div id="back">
<div class="headertop">
Hello!
</div>
<div class="headerbottom">
</div>
<div class="headerlogo">
<a href="index.html"><img border="0" src="images/logo.png" alt="Future Me - Home"/></a>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing...
</div>
<div class="footer">
</div>
</div>
</body>
最佳答案
尝试 margin-top: -200px 而不是使用 top: -200px。
关于html - 如何切割页面CSS/HTML底部溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14256308/