CSS最小高度不適用於所有瀏覽器

我一直在最近在網站上工作。我試圖獲得圍繞我所有內容的邊框，並且至少與頁面一樣高。我的#Container是應擴展以填充整頁的div。我試圖使用最小高度：100％;在我的CSS，但由於某種原因，它不是擴大整個頁面的邊界。 This是我的網站。主頁是一個基本的HTML設置。CSS最小高度不適用於所有瀏覽器

<div id="Container"> 
    <div id="header"> 
    <div id="menu"> 
     <ul id="navbar"> 
      <li><a id="nav1" class="nav-text" href="http://usedatcollege.com/">Home</a></li> 
      <li><a id="nav2" class="nav-text" href="http://usedatcollege.com/bookdb.php">Books</a></li> 
      <li><a id="nav3" class="add-text" href="http://usedatcollege.com/bookdbform.php">+</a></li> 
      <li><a id="nav4" class="nav-text" href="http://usedatcollege.com/wanteddb.php">Wanted</a></li> 
      <li><a id="nav5" class="add-text" href="http://usedatcollege.com/wanteddbform.php">+</a></li> 
      <li><a id="nav6" class="nav-text" href="#">Info</a></li> 
      <li><a id="nav7" class="nav-text" href="#">About</a></li> 
      <li><div id="nav8"><a href=loginform.php class=linktext>Login</a><a class=slashtext>/</a><a href=register.php class=usertext>Register</a></div></li> 
     </ul> 
    </div> 
    </div>  
    <div id="content"> 
    <h3>Home Page</h3> 
    </div> 
    <div id="footer"> 
    <div id="footertext">Copyright &copy; UsedAtCollege.com</div> 
    </div> 
</div>

我的CSS也相當簡單。我有一個CSS重置，我認爲不會影響它，因爲我拿出來了，它仍然有問題。

* { 
    margin: 0; 
    padding: 0; 
} 
#Container { 
    width:980px; 
    min-height:100%; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:0px; 
    border-style:solid; 
    border-width:1px; 
    border-color:rgb(154,154,154); 
}

所以這是對格包裹我的整個頁面的CSS控制。

我只是想知道，如果有人知道爲什麼最小高度不一路得到邊界下到谷底屏幕？

來源

2012-07-28 morganw09dev

好的，謝謝你的建議真相。 – morganw09dev 2012-07-30 21:19:19

添加到您的CSS

html, body { 
    height: 100%; 
}

來源

2012-07-28 20:58:04

喜歡的東西螢火蟲或DOM督察會派上用場在這種情況下。如果您啓動了Firebug，並在Firebug中查看您網頁的內容，您會注意到您的身體本身不會在整個頁面上展開，它只會擴展到頁面長度的一半左右，底部邊框的位置相同展示。這是因爲身體只會按照其內容來擴展，這裏的內容很少，身體只能擴展，min-height: 100%也是如此。

您可以通過包裝絕對定位的包裝div內整個頁面的內容，其top和left值設置爲0px，而高度和寬度100%解決這個問題。然後，邊框將展開到頁面的底部。當然，Firebug仍然會顯示身體只能擴展到半頁，因爲絕對放置的元素不會影響自然尺寸。爲此，您將不得不使用相對定位，並將margin-top調整爲必要的值以實現該效果。

來源

2012-07-28 21:14:31 SexyBeast

CSS最小高度不適用於所有瀏覽器

回答

相關問題