html - 右侧面板底部有 div

Question

为简单起见:我有一个带有 div 作为右侧面板的页面

.rightPanel{
  position: fixed;
  right: 0px;
}

此面板内部有几个 div(标题、标题等)和一个带有正文的 div。我需要在底部放置一个额外的 div 来放置操作栏。

我试过了

.actionBar{
  position: absolute;
  bottom: 20px;
}

这种方法的问题是当body太大时，action bar会盖在上面。如果需要，我想要 body 上的滚动条，操作栏始终固定在底部。

<div class="rightPanel">
  <header> .. </header> 
  <div class="body"> .. </div>
  <div class="actionBar"> .. </div>
</div>

我不想给 body 一个固定的高度，因为它是动态装箱的。

Answer 1

使用flexbox有一个动态的中间部分。这是一个工作演示:

body {
  padding: 0;
  margin: 0;
}

.rightPanel {
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 0px;
  width: 200px;
  height: 100%;
  border: 1px solid blue;
}

header {
  width: 100%;
  height: 30px;
  border: 1px solid red;
}

.body {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.actionBar {
  width: 100%;
  height: 30px;
  border: 1px solid red;
}

<div class="rightPanel">
  <header> this is the header </header>
  <div class="body"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>
  <div class="actionBar"> this is the action bar </div>
</div>

JSFiddle:https://jsfiddle.net/x52rq6du/1/