Question

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

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

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

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

我该怎么办呢？

修改

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

EDIT2

显然，我不清楚我想用内容实现什么。这就是我现在拥有的： enter image description here

请注意内容如何不扩展页眉和页脚之间可用的全部高度。

我所追求的是： enter image description here

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

EDIT3

在第三个条件中添加了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;
}

Answer 1

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

以下是使用display:table http://jsfiddle.net/fLnkf/

的内容

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

希望这有帮助！

如何使HTML内容占据所有可用高度？

1 个答案: