Question

我有一个蓝色边框的div。这个div是页脚，因此它位于页面的底部。 div中的文本显示在底部，但边框本身显示在顶部。

这是HTML：

<body>

<div id="header">
this is the header
</div>

<div id="mainleft">
this is the main left
</div>

<div id="mainright">
this is the main right
</div>

<div id="footer">
this is the footer
</div>

</body>

这是CSS：

body{
    background-color:#666666;
}

#header{
    min-height:75px;
    border:3px solid #000099;
}

#mainleft{
    height:500px;
    width:15%;
    border-left:3px solid #000099;
    float:left;
}
#mainright{
    height:500px;
    width:84%;
    border-left:3px solid #000099;
    border-right:3px solid #000099;
    float:right;
}

#footer{
    height:70px;
    width:100%;
    border:3px solid #098099;
    bottom:0px;
}

Answer 1

在页脚元素中添加clear: both;。

Answer 2

页脚div未出现在底部。你需要一个容器div来包装里面的所有div并设置它的属性（宽度，高度等）。

Div边界没有显示在正确的位置

2 个答案: