页眉和页脚固定和内容填充之间的所有空间

Question

我正在尝试为我的网站创建一个聊天应用的布局。它需要看起来像这样： 关键是我不想身体滚动，只是聊天区域。我的标记如下：

<div class="container">
    <div class="header"></div>
    <div class="chat"></div>
    <div class="footer"></div>
</div>

有人可以帮忙吗？

Answer 1

使用固定定位，您可以在CSS中执行类似的操作。 假设聊天部分除了“聊天”作为其ID，页眉和页脚的高度为200px。

.container .header {
    position: fixed;
    top:0;
    left:0;
    right:0;

    height: 200px;
}

.container .chat {
    position: fixed;
    left:0;
    right:0;
    top:200px;
    bottom:200px;

    /* For Scrollbars */
    overflow: auto;
}

.container .footer {
    position: fixed;
    bottom:0;
    left:0;
    right:0;

    height: 200px;
}

建议：您应该使用“标题”标记和“页脚”标记，而不是受css类影响的“div”标记。此外，如果将标题，聊天和页脚包装在包装器div中，则应考虑使用绝对定位而不是固定定位，以使位置相对于包装器而不是文档。如果这样做，请不要忘记在包装器div中添加“position：relative”。

Answer 2

最简单的方法是绝对定位所有内容，并让主要内容区域具有

header {
  position: absolute;
  height: 50px;
  top: 0;
  left: 0;
  right: 0;
}

footer {
  position: absolute;
  height: 50px;
  bottom: 0;
  left: 0;
  right: 0;
}

#main {
 overflow: auto;
 position: absolute;
 top: 50px
 left: 0;
 right: 0;
 bottom: 50px;
}

像这样：http://jsfiddle.net/cM277/