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

Question

我正在尝试为我的聊天应用程序网站创建布局。它需要看起来像这样: 关键是我根本不想滚动 body ，只是聊天区域。我的标记如下:

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

有人能帮忙吗？

Answer 1

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

.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”。