Question

我使用的是Twitter Bootstrap＆＃39;粘性页脚＆＃39; CSS确保我的页脚出现在页面底部。如何使我的内容（示例中的蓝色div）一直延伸到页脚（示例中的黄色div）？我尝试过.content 100％身高，但没有效果。

我的CSS

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.content {
  height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

我的HTML

<body>
<div class="header">This is my header</div>
<div class="content">This is my content</div>
<div class="footer">This is my footer</div>
</body>

示例： http://jsfiddle.net/pjktqnmo/1/

参考： http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css

更新：我的标题包含我的页面标题，因此标题的高度因页面而异。

Answer 1

这是一个没有使用position属性的解决方案。

请参阅以下代码段：

html, body {
    height: 100%;
    margin: 0;
    color:grey;
}
.header {
    background-color:red;
}
.content {
    min-height: 100%;
    margin-bottom: -60px; /* equal to footer height */
    background-color:blue
}
.content:after {
    content:"";
    display: block;
}
.footer, .content:after {
    height: 60px;
}
.footer {
    background: yellow;
}

<body>
    <div class="header">This is my header</div>
    <div class="content">This is my content</div>
    <div class="footer">This is my footer</div>
</body>

此处有更多信息：sticky footer

更新的答案 基于与OP的讨论，其中OP声明不想要拥有Vertical ScrollBar，因此下面是一个解决方案：

我做了什么？将div .header的div .content子项设为html, body { height: 100%; margin: 0; color:grey; } .header { background-color:red; } .content { min-height: 100%; margin-bottom: -60px; /* equal to footer height */ background-color:blue } .content:after { content:""; display: block; } .footer, .content:after { height: 60px; } .footer { background: yellow; }，对我上面的第一个代码段进行0次更改。

<div class="content">
  <div class="header">This is my header</div>
  This is my content
</div>
<div class="footer">This is my footer</div>

{{1}}

Answer 2

如果您的标题高度为30px，并且您的页脚高度为60px，则此内容适用于内容：

position: absolute;
left: 0;
right: 0;
top: 31px;
bottom: 61px;

Answer 3

设置高度如下：

html, body {
  height: 100%;
}
.content {
  min-height: 100%;
}

http://jsfiddle.net/pjktqnmo/6/

Answer 4

使用javascript工作得很好当用户更改窗口尺寸时，它还允许您具有良好的高度。

在页面加载时以及当用户更改窗口尺寸时调用此方法：

$('.content').css('height',$(document).height() - ($('.header').height() + $('.footer').height() + `MARGIN TOP OR PADDING`) - $('.contact').height());

Answer 5

您可以尝试使用表格作为页面的容器。确保您的<html>，<body>和<table>元素的宽度和高度均为100％。

在表格中设置三行并将标题，内容和页脚放入每一行，然后将内容行设置为100％高度，以便占用页面空间的其余部分。

最后，删除表格单元格之间的间距

＆＃13;

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.header {
  background-color: green;
}
.content {
  height: 100%;
  background-color: cyan;
}
.footer {
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
table {
  width: 100%;
  height: 100%;
  border-spacing: 0px;
}
td {
  padding: 0px;
}
.contentCell {
  height: 100%;
}

＆＃13;

<body>
  <table>
    <tr>
      <td>
        <div class="header">This is my header</div>
      </td>
    </tr>
    <tr class="contentCell">
      <td>
        <div class="content">This is my content</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="footer">This is my footer</div>
      </td>
    <tr>
  </table>
</body>

＆＃13;

如何使内容div从标题div延伸到页脚div？

5 个答案: