我正在尝试为我的聊天应用程序网站创建布局。它需要看起来像这样: 关键是我根本不想滚动 body ,只是聊天区域。我的标记如下:
<div class="container">
<div class="header"></div>
<div class="chat"></div>
<div class="footer"></div>
</div>
有人能帮忙吗?
最佳答案
使用固定定位,您可以在 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”。
关于html - 页眉和页脚固定,内容填充之间的所有空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20929245/