0

我有几个 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>
4

2 回答 2

2

尝试margin-top: -200px而不是使用top: -200px.

于 2013-01-10T11:27:18.743 回答
1

drmonkeyninja 是正确的！但仅适用于margin-top，.content否则.headerlogo将不可见。此外，在应用 drmonkeyninja 建议的修复程序时删除 - 保留top不会将页脚强制到页面底部（当然，除非这是您的意图！）.footertop

我还注意到这color: white;是重复的.footer=）

于 2013-01-10T11:36:17.480 回答