1

我有两个主要div的 . 一个是#header菜单，一个是#container内容。我希望它#container到达页面底部，无论是否充满内容。问题是添加height:100%;到body,html和#container会导致额外的空白和滚动条，这是我不需要的时候不想要的。

HTML：

<div id='header'></div>
<div id='container'></div>

CSS：

body{

    margin:0;
}

body,html {height:100%;}

#header {

    height:70px;
    width:100%;
    background-color:red;
}

#container {

    width:600px;
    background-color:gray;
    height:100%;
    margin:0 auto;
}

JSFIDDLE：http: //jsfiddle.net/ymBnw/

4

7 回答 7

1

是的，它会这样做。因为你已经给出了#container100% 的高度，这是相对于身体的。所以你给了#container与身体相同的高度。最重要的是，你有#header高度。所以你的总内容现在是 100% + 70px（标题）。

解决此问题的方法是在主体上不设置高度#container并在主体上设置灰色背景色。

你也可以试试：

#container {
  position: relative;
  z-index: 0;
  top: -70px;
  padding-top: 70px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; }

#header { 
  position: relative;
  z-index: 10; }

或者你可以试试：

  #container {
      margin-top: -70px;
      padding-top: 70px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box; }

我不喜欢第二种方法。您也可以使用绝对定位和容器顶部的 70 像素填充来执行此操作。

于 2013-08-09T12:25:15.043 回答
1

您应该使用min-height: 100%而不是height: 100%解决background-color问题。

这是一个有效的解决方案：

CSS

#header {
    height:70px;
    width:100%;
    background-color:red;
    position: relative;
    z-index: 10;
}

#container {
    width:600px;
    background-color:gray;
    min-height: 100%;
    margin:0 auto;
    margin-top: -70px;
    padding-top: 70px;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

JSFiddle 演示 #1

JSFiddle 演示 #2

作为替代解决方案，box-sizing您可以使用::before伪元素代替 ，如下所示：

#container {
    width:600px;
    background-color:gray;
    min-height: 100%;
    margin:0 auto;
    margin-top: -70px;
}

#container:before {
    content: ' ';
    display: block;
    height: 70px;
}

JSFiddle 演示 #3

于 2013-08-09T12:40:10.277 回答
1

你可以在容器 div 上做一个 position:absolute 。

代码：

#container {
    width:600px;
    background-color:gray;
    margin:auto;
    bottom:0;
    top:70px;
    position: absolute;
    left:50%;
    margin-left:-300px;
}

演示

于 2013-08-09T12:33:21.277 回答
1

如果你玩 的padding和margin，#container并且#header绝对定位，你可以做到这一点。我没有考虑width，您可以随意设置。

html, 
body {
    padding: 0;
    margin: 0;
    height: 100%;
}

#header {    
    position: absolute;
    top: 0;    
    width: 100%;
    height: 70px;
    background-color: red;
    z-index: 10;
}

#container {    
    width: 600px;
    height: 100%;
    background-color: gray;
    margin: -70px auto -70px auto;
    padding-top: 70px;
}

#content
{
    padding-top: 70px;
}

工作示例：http: //jsfiddle.net/ymBnw/15/

编辑

我在设置 时犯了一个错误padding，它需要（显然）是margin（140px 而不是 70px）的两倍。代码已修复。

编辑 2

又不开心了。以前的编辑使滚动条回来了。提出的新解决方案div在#container.

于 2013-08-09T12:33:41.233 回答
0

使用新的 flexbox 布局，您所要做的就是将这些 CSS 属性添加到正文中。

body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

这会将布局设置为 flexbox，并指定 body 元素的直接子元素应从上到下对齐。如需更详尽的 flexbox 指南，请查看本教程。请注意，flexbox 布局目前是一个候选推荐，旧版浏览器不会支持它。当前基于 Webkit 的浏览器仍然需要 -webkit 供应商前缀。

于 2013-08-09T13:00:57.857 回答
0

尝试这个

#container {

width:100%;
background-color:gray;
height:100%;
margin:0 auto;
}



#header {
height:70px;
width:100%;
background-color:red;
position:absolute;
}

演示

于 2013-08-09T12:27:13.600 回答
0

您将高度指定container为 100%，但随后将header高度设置为 70px。这最终会导致你的全身是 100% 的浏览器窗口 + 70px。

这就是为什么你会得到一个滚动条，因为 100% + 70px 会导致溢出。

编辑：

正如其他人所建议的那样，您可以使用带有填充容器的绝对定位的标题。不过，在这种情况下，您显然会失去流量。在 HTML 中指定高度时，总是需要权衡取舍...

于 2013-08-09T12:27:40.090 回答