Question

我最近一直在网站上工作。我试图获得围绕我所有内容的边框，并且至少与页面一样高。我的#Container是应该扩展以填充整个页面的div。我试图使用最小高度：100％;在我的CSS中，但由于某种原因，它并没有在整个页面上扩展边框。 This是我的网站。主页是一个基本的html设置。

<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);
}

这就是包装整个页面的div的CSS控件。

我只是想知道是否有人知道为什么最小高度没有让边框一直到屏幕底部？

Answer 1

将此添加到您的CSS

html, body {
    height: 100%;
}

Answer 2

像Firebug或DOM-Inspector这样的东西在这种情况下会派上用场。如果您启动Firebug，并在Firebug中查看页面内容，您会注意到您的身体本身并未在整个页面中展开，它只会扩展到页面长度的一半左右，底部边框的位置相同。展示。这是因为身体只会根据其内容进行扩展，内容在这里最小，身体只会扩展，min-height: 100%也是如此。

您可以通过将整个页面内容包装在绝对定位的包装器div中，将其top和left值设置为0px，以及高度和宽度来解决此问题。到100%。然后边框将扩展到页面底部。当然Firebug仍会显示身体只扩展到半页，因为绝对放置的元素对自然尺寸没有贡献。为此，您必须使用相对定位，并将margin-top调整为必需值才能产生效果。

CSS Min-Height不适用于所有浏览器

2 个答案: