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

Question

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

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

有人可以帮忙吗？

- Benedict Lewis

---

请删除<aside>的宽度，删除主体上的padding-left和负边距，具体如下所示：http://codepen.io/gc-nomade/details/hFumI - G-Cyrillus

是的，没有侧边栏，那正是我所需要的。 - Benedict Lewis

或者我的CodePen ;)带有内容内部滚动。 - G-Cyrillus

Answer 1

使用固定定位，您可以在CSS中执行以下操作。 假设聊天部分的区域具有“chat”作为其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;
}

建议：你应该使用“header”标签和“footer”标签，而不是受CSS类影响的“div”标签。此外，如果你将头部、聊天和页脚包装在一个包装器div中，你应该考虑使用绝对定位而不是固定定位，以便位置相对于包装器而不是文档。如果这样做了，请不要忘记向包装器div添加“position: relative”。

- Érik Desjardins

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/

- jhummel

---

为什么要使用fixed。他明确表示不希望页面滚动。没有必要这样做。 - jhummel

没错。固定位置始终相对于文档而言。如果文档永远不会滚动，固定定位就像绝对定位一样没有任何作用。 - jhummel