0

请考虑以下 jsFiddle - http://jsfiddle.net/mark69_fnd/hwCuB/（您可以在问题正文之后找到代码）。

它代表了经典页眉、内容、页脚 HTML 布局的一个简单示例。请注意：

  1. 内容永远不会与页脚重叠。调整窗口大小最终将创建一个垂直滚动条，而不是将内容移动到页脚上。
  2. 没有多余的滚动条。
  3. 没有绝对高度，除了页脚，可能假定不高于 2em。
  4. 内容高度小于页眉和页脚之间的可用高度。

我想保留前三个属性，但更改最后一个，以便内容高度是页眉和页脚之间的全高。而且我想这样做而不诉诸javascript。

如果有的话，我该怎么做？

编辑

给定的 html 和 css 只是一个示例。只要最终结果满足我的问题条件，您就可以自由更改它们。

编辑2

显然，我不太清楚我想通过内容实现什么。这是我现在拥有的： 在此处输入图像描述

请注意内容如何没有扩展页眉和页脚之间可用的完整高度。

我所追求的是： 在此处输入图像描述

（在mspaint中编辑，我不知道真的这样做）

编辑3

在第三个条件中添加了一个 except 子句：

除了页脚，可以假定它不高于 2em。

HTML：

<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css">
</head>
<body>
<div class="container">
 <div class="header">
     Header goes here.
  </div>

  <div class="content">
    <div class="innerWrapper">
      Content goes here.
      </div>
  </div>

  <div class="footer">
    <div class="status">
       Footer goes here.
    <div>
  </div>
</div>
</body>
</html>​

CSS：

html, body {
    height: 100%;
    width: 100%;
}

.container {
    position: relative; /* needed for footer positioning*/
    margin: 0 auto;
    height: auto;
    min-height: 100%;
    background-color: #ddd;
}

.content {
    padding: 0em 0em 2em; /* bottom padding for footer */
    background-color: #bbb;
}

.footer {
    position: absolute;
    width: 100%;
    bottom: 0; /* stick to bottom */
}

.status, .header {
    background-color: #999;
    border: solid 1px #000000;
}

​</p>

4

1 回答 1

1

可能有几种方法可以做到这一点，但目前我能想到的唯一方法都涉及设置/了解页眉和页脚的高度。

这是一个使用display:table http://jsfiddle.net/fLnkf/

根据您的要求是否允许您更改 html 或使用 CSS3，可能还有其他解决方案。

希望这可以帮助！

于 2012-10-25T19:26:54.990 回答