如何减少页面CSS/HTML的底部溢出_Html_Css

如何减少页面CSS/HTML的底部溢出

html css

如何减少页面CSS/HTML的底部溢出,html,css,Html,Css,我有两个div，其中一个覆盖在另外两个div之上。因此，对于底部div，我使用了如下内容（CSS）：但现在页面底部还有200个像素是空的。我如何切断/清除溢出物？完整的CSS代码是： div.headertop { background-image:url('images/bkb.png'); background-repeat:repeat; width: 1000px; height:200px; background-color: black;

我有两个div，其中一个覆盖在另外两个div之上。因此，对于底部div，我使用了如下内容（CSS）：

但现在页面底部还有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>


你好
我爱你，我爱你。。。

尝试

页边距顶部：-200px

而不是使用

页边距顶部：-200px
尝试页边距顶部：-200px
而不是使用页边距顶部：-200px
页边距顶部
应用于。内容
，否则。标题日志
将不可见。另外，当应用Drmonkeynija建议的修复程序时，从.footer
中删除top
——保留top
不会强制页脚位于页面底部（当然，除非这是您的意图！）
我还注意到颜色：白色是针对.footer
=）复制的。
Drmonkeynija是正确的！但仅将页边距顶部
应用于。内容
，否则。标题日志
将不可见。另外，当应用Drmonkeynija建议的修复程序时，从.footer
中删除top
——保留top
不会强制页脚位于页面底部（当然，除非这是您的意图！）
我还注意到颜色：白色
是针对.footer
=）复制的，如果您发布示例工作代码，那就太好了。html和css@Pwn固定正文的高度会阻止页面调整到适合页面内容的正确高度，可能会过早切断！如果您发布示例工作代码，那就太好了。html和css@Pwn固定正文的高度会阻止页面调整到适合页面内容的正确高度，可能会过早切断！
<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>