Question

我正在尝试使用底部的页脚进行100％高度布局。我有一个网站包装器，其中我有两个内容div。在第二个内容div中，我在底部有一个页脚。问题是顶级内容div似乎将第二个内容div推到网站包装器之外。

这是我正在尝试的代码：

 <style type="text/css">
html, body { height:100%;}

#sitecontainer { 
    height:100%;
    border: medium #000 solid;
}
#contentcontainerone{
    border: medium #F00 solid;
}
#contentcontainertwo{
    height:100%;
    border: medium #00F solid;
    position:relative;
}
#footer{
    position:absolute;
    bottom:0;
    width:100%;
    text-align:center;
}
</style>
</head>

<body>
<div id="sitecontainer">
    <div id="contentcontainerone">
    Some content <br />
    Some content <br />
    Some content <br />
    Some content <br />
    Some content <br />
    </div>
    <div id="contentcontainertwo">
        <div id="footer">Footer</div>
    </div>
</div>
</body>

这是指向页面的链接：http://www.smsidat.com/test/index.html

我基本上想要实现的是网站应始终100％高度明智，因此伸展到浏览器窗口的底部或内容结束，如果它的高度更高，底部有一个页脚。因此，理想情况下，带有蓝色边框的div应保留在具有黑色边框的包装内，并且不会超出浏览器窗口的底部或内容的末端（如果它更大）。

非常感谢任何想法如何解决这个问题，谢谢。

Answer 1

这里是解决方案：

html, body
{
  height: 100%;
  overflow: hidden;
}

#sitecontainer
{
  height: 100%;
  position: relative;
}

#footer /*OUTSIDE THE CONTAINER */
{
  bottom: 0;
  position: absolute;
  height: 50px; /*change this*/
}

Answer 2

建议使用<table>标记不进行布局。 CSS3有很多方法可以解决这个问题，如上所述（容器和父母一直使用100％高度到html标签）。有些情况（参考：Eric Meyer，Smashing CSS书籍）然而，当CSS display: table-cell样式属性适合布局时...至少它将布局控件放回CSS而不是内容最好的做法。

Answer 3

尝试将DIV对齐到另一个div的底部可能会非常棘手。有很多方法可以实现这一目标，但我建议只使用一个表格。

<table>
    <tr>
        <td><div id="header"></div></td>
    </tr>
    <tr>
        <td><div id="content"></div></td>
    </tr>
    <tr>
        <td><div id="footer"></div></td>
    </tr>
</table>

然后使用CSS定义每个DIV的高度，内容DIV与页面一起拉伸，直到溢出发生，而页眉和页脚DIV保持在原始高度。

CSS伸展div 100％的高度超出了网站容器＆amp;浏览器窗口

3 个答案: