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邊框沒有顯示在正確的位置

回答

相關問題