1

我最近一直在做一个网站。我试图获得一个围绕我所有内容的边框，并且至少与页面一样高。我的#Container 是应该展开以填满整个页面的 div。我正在尝试使用 min-height:100%; 在我的 CSS 中，但由于某种原因，它没有将边框扩展到整个页面。这是我的网站。主页是一个基本的 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 控件。

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

4

2 回答 2

4

将此添加到您的 CSS

html, body {
    height: 100%;
}
于 2012-07-28T20:58:04.043 回答
0

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

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

于 2012-07-28T21:14:31.433 回答