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

我有一个具有蓝色边框的div。这个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; 
}

来源

2012-03-01 DonJuma

将一个clear: both;添加到页脚元素。

来源

2012-03-01 01:20:50

这工作就像一个魅力。我从来没有听说过CLEAR，但它的工作，谢谢。 – DonJuma 2012-03-01 01:24:53

是的，你可能想看看位置，浮动，清除和显示标签，以避免未来的定位/布局困境。并标记这回答。 – 2012-03-01 01:28:25

这是jsfiddle链接：http://jsfiddle.net/Zum7K/ – Sherzod 2012-03-01 01:28:54

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

来源

2012-03-01 01:20:49 CYMA

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

回答

相关问题