Question

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

我正在使用 Twitter Bootstrap 3 ，我的初始布局是使用as exemple “带有粘性页脚的Bootstrap”示例（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>

Sticky Footer 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%;
}

此代码生成此布局：

LayoutNow

但是，正如您所看到的，div #main-container不会增长，直到布局结束。 div保持其内容的高度。

我想要的是这个div总是填满整个页面，如下所示：

LayoutThen

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

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

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

Answer 1

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

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

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

Answer 2

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

要同时使用粘性页脚和REAL fullheight＃main-container（而不是使用背景伪装），您必须使用display:table和display:table-row。这是有效的，因为当您使用display:table时，height:100%的工作方式与常规min-height:100%相同，而display:table-row内部的<!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>将始终拉伸以使用所有可用的垂直空间。
注意：这与使用html表不同，因为在这种情况下，您不需要使用非语义标记来扩展标记，如下例所示。
这是示例HTML代码：

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;
}

这是CSS

{{1}}

Answer 3

我认为min-height由于报告的错误而无效。请参阅：stackoverflow.com/questions/8468066。

创建#main-container增长到最后的错觉的一种简单方法是将#wrap的background-color设置为与＃main-container's相同的值。

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

3 个答案: