固定页眉和页脚的Chatbox布局

Question

我试图找出一种方法，使我的chatbox布局与固定的页眉在顶部和固定的页脚在底部一直有一个chatbox身体滚动和嵌套，直到固定的页眉和页脚。我试过几种不同的方法，但似乎还是不能把它弄得干干净净。

​

.chat-head  {    
    background: red;
    position: fixed;
    top: 0;
    width:100%;
}
.chat-body  {
    position: relative;
    overflow-y: scroll;
    height: 93vh;
    margin: 25px 0;
    background:green;
}
.chat-foot {    
    background: blue;
    position: fixed;
    bottom: 0;
    width:100%;
}

<div class="col chat-head">
  One of three columns
</div>
  <div class="w-100 d-none d-md-block"></div>
<div class="col chat-body">chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>

</div>
  <div class="w-100 d-none d-md-block"></div>
<div class="col chat-foot">
  One of three columns
</div>

​

这是我的JSFiddle：https://jsfiddle.net/aLysfspo/1/

Answer 1

添加带有.container的position: relative和一些padding

1. padding-top =固定头的height；
2. padding-bottom =固定页脚的height；
3. 重置所有DOM节点的margin和padding。

运行下面的代码片段或查看更新的JSFiddle，这是您想要的结果吗？

​

* {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  padding-top: 10vh;
  padding-bottom: 10vh;
  box-sizing: border-box;
}

.chat-head {
  background: red;
  position: fixed;
  top: 0;
  width: 100%;
  height: 10vh;
}

.chat-body {
  position: relative;
  overflow-y: scroll;
  height: 80vh;
  background: green;
}

.chat-foot {
  background: blue;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 10vh;
}

<div class="container">
  <div class="col chat-head">
    One of three columns
  </div>
  <div class="w-100 d-none d-md-block"></div>
  <div class="col chat-body">
    chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>


  </div>
  <div class="w-100 d-none d-md-block"></div>
  <div class="col chat-foot">
    One of three columns
  </div>
</div>

​

Answer 2

我情不自禁地注意到，你正试图用Bootstrap来做这件事。当使用Bootstrap时，尽量少写CSS，否则就会违背使用框架的目的。另外，您的自定义CSS最终会破坏框架本身的特性，比如组件的响应性。

作为一个示例，我使用卡片组件和一个间隔效用类重写了您的示例。我在header、body和header部分中使用了卡片组件。为了删除body的y轴(顶部和底部)中的填充，我使用了间隔实用工具类py-0。下面是最终代码

​

.chat .card-header {
  background: red;
}

.chat .card-body {  
  overflow-y: scroll;
  height: 50vh;
  background: green;
}

.chat .card-footer {
  background: blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card chat">
  <div class="card-header">
    One of three columns
  </div>
  <div class="card-body py-0">
    chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>chat<br>

  </div>
  <div class="card-footer">
    One of three columns
  </div>
</div>

​