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最小高度不适用于所有浏览器

回答

相关问题