頁面邊框顯示不正確

我剛剛更改了自己的容器div標籤以自動展開高度，但現在我遇到了邊框問題，它只在頁面頂部顯示，我需要它顯示所有周圍，該頁面的代碼如下：頁面邊框顯示不正確

<!doctype html> 
<html> 
<head> 
<title>Home Page</title> 
</head> 
<body> 
<div id="container" style="width:500px; border: 2px solid black; margin:auto"> 

<?php include "header.php"; ?> 

<div id="content" style="background-color:#EEEEEE; clear:both; width:500px; float: left"> 
<p align="center"><b>Quiz 1</b></p> 
// There is some more code in the page 
</div> 

<?php include "footer.php"; ?> 

</div> 
</body> 
</html>

的header.php：

<div id="header" style="background-color:#FFA500; width:500px; clear:both; height:75px; float: left" align="center"> 
    <h1>Quiz Name</h1> 
</div>

footer.php：

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center; width:500px; height:25px; float: left"> 
    Copyright/Disclaimer 
</div>

來源

2013-12-15 Omax

其實你並沒有將其設置在高度擴張。你只是用'margin：auto'作爲中心。 – MikeSmithDev

我有一個高度設置，但我讀取刪除高度屬性將自動擴大頁面 – Omax

嗯，它會擴大到它的內容大小。 Stack Overflow中可能有很多答案顯示如何自動創建頁面的高度。 – MikeSmithDev

你的主要問題是，一切是浮動的。您需要清除那些容器div的浮動元素才能正確顯示。一種方法是</div>集裝箱前添加結算div：<div style="clear:both;"></div>

 <div style="clear:both;"></div> 
    </div> 
</body> 
</html>

來源

2013-12-15 18:21:29 MikeSmithDev

謝謝，這工作 – Omax

嘗試</body>之前添加以下代碼：

<div style="clear:both;"></div>

來源

2013-12-15 18:21:22

頁面邊框顯示不正確

回答

相關問題