使容器 div 用粘性页脚填充所有布局答案

【问题标题】：Make container div fills all layout with sticky footer使容器 div 用粘性页脚填充所有布局
【发布时间】：2014-01-28 09:18:25
【问题描述】：

我为个人网站创建新布局。

我正在使用 Twitter Bootstrap 3，我的初始布局是使用示例 “带有粘性页脚的引导程序”示例 (http://getbootstrap.com/examples/sticky-footer-navbar/)

这是我的html：

<body>
    <!-- Wrap all page content here -->
    <div id="wrap">
        <!-- Begin page navigation -->
        <nav id="nav-container" class="navbar navbar-default container" role="navigation">
            <div class="container">
                <!-- Here I put a very normal Bootstrap 3 navbar -->
            </div>
        </nav>
        <!-- Begin page content -->
        <div id="main-container" class="container">
            <!-- All my content goes here! -->
        </div>
    </div>
    <!-- Begin page footer -->
    <footer id="footer" class="container">
        <div class="container">
        </div>
    </footer>
</body>

粘性页脚 CSS：

html, body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -100px;
  /* Pad bottom by footer height */
  padding: 0 0 100px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 100px;
}

以及我的布局的自定义样式：

body {
    /* Body's background will be grey */
    background-color: #C0C0C0;
}
#main-container {
    /* A box where I'll put the content will be white */
    background-color: #FFFFFF;
}
#wrap {
    height: 100%;
    min-height: 100%;
}
#main-container {
    min-height: 100%;
    height: 100%;
}

此代码生成此布局：

但是，如您所见，div #main-container 直到布局结束时才会增长。 div 跟他内容的高度保持一致。

我想要的是这个 div 总是填满整个页面，像这样：

互联网上的许多解决方案都说我将min-height 修复为一些测试值，但是这样我将无法让我的网站保持响应（保持我的布局对我来说非常重要始终响应，这是我使用 Bootstrap 3) 的主要原因。

其他解决方案是使用 javascript 计算 div 高度。个人不喜欢这个解决方案。我希望我只能通过使用 CSS 来解决这个问题。

有人知道如何解决这个问题吗？

【问题讨论】：

您可以通过将#wrap 的背景颜色设置为与#main-container 相同的值来创建#main-container 增长到最后的错觉。
是的，我一遍又一遍地遇到同样的问题，但我相信至少不能用 CSS 和 HTML 做到这一点
大家好，感谢您的帮助！ @AntonisGrigoriadis，您的解决方案非常完美！我所要做的就是将我的#wrap 设置为与#main-container 相同的宽度并设置背景颜色。
我真的不敢相信设置#main-container min-height 不起作用...有人知道原因吗？
好主意@AntonisGrigoriadis 谢谢！我的主容器 div 有一个半透明的背景，所以我必须为父 div 使用与主容器的宽度和位置相匹配的透明 png 背景图像。这显然需要在较小的屏幕宽度上进行调整，因为背景图像不会总是适应布局的其余部分。

标签： html css responsive-design twitter-bootstrap-3

【解决方案1】：

只要您处理百分比，您的网站就会响应。所以使用 min-height:100% 确实解决了您的问题，这只是 CSS。如果你不希望这里涉及 Javascript，那就是要走的路。

请参阅 JS Fiddle DEMO。您的容器正在填满整个页面。

#main-container {
    min-height: 100%;
    background: #fff;
}

【讨论】：

您好，感谢您的帮助！不幸的是，我的#main-container 已经设置了min-height: 100%;，但它没有用。 ://
@vinigarcia87 尝试将#wrap 的高度更改为height: 100%;。为我工作！
@Morven 您可能想提一下，您需要将高度指定为100% 而不是auto。那么，我认为这是正确的答案。 :)

【解决方案2】：

我认为min-height 因报告的错误而无法工作。看到这个：stackoverflow.com/questions/8468066。

创建#main-container 一直增长到最后的错觉的一种简单方法是将#wrap 的背景颜色设置为与#main-container 相同的值。

【讨论】：

正如他们在您提供的链接中指出的那样，这不是错误，这正是它应该工作的方式。当父高度没有严格定义时，百分比高度将被忽略。 100% 的自动为您提供自动 :) 作为旁注，我找到了一种获得真正全高容器的方法，而不是用背景颜色伪造它。在下面检查我的答案。

【解决方案3】：

如果你想要有粘性页脚和全高#main-container，你必须修改你的结构。首先，让我解释一下为什么你不能用你现在使用的sticky-footer方法解决这个问题：
设置#main-container's height:100% 或 min-height:100% 将不起作用，因为您不能对高度未严格定义的父级使用百分比高度。请注意，在当前接受的答案中，这被认为是一个错误，但事实并非如此，这只是它应该工作的方式。在您的示例中，#wrap 的高度设置为自动，因此 #main-container 高度只是忽略 100% 并回退到自动。

要同时拥有粘性页脚和真实全高#main-container（而不是伪造背景），您必须使用display:table 和display:table-row。这是有效的，因为当您使用 display:table 时，height:100% 就像您的常规 min-height:100% 一样工作，而内部的 display:table-rows 将始终拉伸以使用所有可用的垂直空间。
注意：这与使用 html 表格不同，因为在这种情况下，您不需要使用非语义标签来膨胀您的标记，正如您将在以下示例中看到的那样。
这是示例 HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div id="maincontainer" class="astable">
            <div id="header" class="astablerow">
                header
            </div>
            <div id="middlecontainer" class="astablerow">
                content
            </div>
            <div id="footer" class="astablerow">
                footer
            </div>
        </div>
    </body>
</html>

这是 CSS

html, body{
    margin:0;
    padding:0;
    height:100%;
}
.astable{
    display:table;
    height:100%;
    table-layout:fixed;
    width:100%;
}
.astablerow{
    display: table-row;
}
#header{
    height:30px;
    background-color:#00ff00;
}
#footer{
    height:30px;
    background-color:#0000ff;
}
#middlecontainer{
   background-color:#ff0000;
}

【讨论】：