具有固定页眉和页脚的Chatbox布局

Question

我试图找到一种方法让我的聊天框布局在顶部有一个固定的标题，在底部有一个固定的页脚，同时聊天框主体可以滚动并嵌套到固定的页眉和页脚。我尝试了几种不同的方法，但似乎仍然无法让它恰到好处地干净。

.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最终将破坏框架本身的功能，如组件的响应性。

作为一个例子，我使用Card Component和spacing utility类重写了你的例子。我使用卡组件与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>