2

我不太擅长 CSS，但希望这里有人可以提供帮助。我有以下样机。（我已经剥离了我的内容以便于查看）

<body>
   <div id="container">
     <div id="header"></div>
      <div id="body">
          <div id="navBar"></div>
          <div id="mainContent"></div>
      </div>
     <div id="footer"></div>
   </div>
</body>

我的CSS如下：

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

现在我不确定如何让“navBar”成为页面高度。我试过添加 height: 100% 但这不起作用。

谢谢，马特

4

3 回答 3

2

给一个元素height: 100%将给它一个等于其包含元素的高度，在您的情况下是 #body. 由于您示例中的 body 仅与容纳其内容所需的一样大，因此将是该高度#navBar的 100% 。

要解决此问题，您可以使它们#container与#body height:100%body 标签一样高，它占据了整个页面：

#container {
    height:100%
}
#body{
    height:100%;
}

为了完整起见，您还可以设置topand bottomof #navBar：

position: absolute; 
top: 20px; 
bottom: 60px; /* height of footer */

要了解差异，请使用This JS Fiddle。弄乱height和top, bottom, position属性以查看您的更改如何影响布局；只是不要同时使用两种定位方法！

于 2009-10-19T22:14:21.667 回答
1

您的问题似乎是每个父 DIV 一直到 BODY 标签必须明确地具有 100% 的高度，以便#navBar具有 100% 的高度。这意味着您还必须将#body的高度设置为 100%，因为它是#navBar的父容器。

于 2009-10-19T22:45:39.150 回答
0

看看这个网站——我假设你想要一个两栏布局——这个网站会告诉你如何做你想做的事。希望能帮助到你。

于 2009-10-19T22:13:26.490 回答