Question

我对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”成为页面高度。我试过添加高度：100％，但这不起作用。

谢谢，马特

Answer 1

给予元素height: 100%将使其高度等于其包含元素的高度，在您的情况下为#body。由于您的示例中的正文只有保存其内容所需的大小，因此#navBar将是高度的100％。

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

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

为了完整起见，您还可以设置top的{{1}}和bottom：

#navBar

要了解其中的差异，请使用This JS Fiddle。使用position: absolute; top: 20px; bottom: 60px; /* height of footer */和height属性进行混乱，了解更改如何影响布局;只是不要同时使用两种定位方法！

Answer 2

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

Answer 3

看看这个site - 我假设你想要一个两列的布局 - 这个网站将向你展示如何做你想要的。希望能帮助到你。

CSS：导航栏扩展到整个页面高度

3 个答案: