Question

我有两个主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/

Answer 1

是的，它会那样做。因为你给出了#container 100％的高度，这是相对于身体的。所以你给了#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; }

我不是第二种方法的粉丝。您也可以使用绝对定位和容器顶部的70px填充来完成此操作。

Answer 2

你可以在容器div上做一个绝对的位置。

代码：

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

Demo

Answer 3

如果您使用padding的{{1}}和margin，并绝对定位#container，则可以实现此目的。我没有考虑#header，您可以根据自己的喜好进行设置。

width

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

修改

我在设置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; }时犯了一个错误，它需要（显然）是padding的两倍（140px而不是70px）。代码已修复。

编辑2

再也不开心了。之前的编辑使滚动条回来了。建议的新解决方案在margin内添加了新的div。

Answer 4

您应该使用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 Demo #1

<强> JSFiddle Demo #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 Demo #3

Answer 5

试试这个

#container {

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



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

demo

Answer 6

您指定container的高度为100％，但您将header高度设置为70px。这将最终导致您的整个身体100％的浏览器窗口+ 70px。

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

修改

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

Answer 7

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

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

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

标题导致不必要的滚动条。

7 个答案: