Html 右面板，底部有div

简单一点：我有一个页面，右面板是

div

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

该面板内部有一些

div

（标题、标题等），以及带有主体的

div

。我需要一个额外的

div

，在底部放置操作栏

我试过了

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

这种方法的问题是，当身体太大时，动作条会在上面。我想在身体上的滚动条，如果需要，与行动栏始终固定在底部

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

..  
.. 
.. 

---

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

你可以使用clear属性

clear属性告诉浮动元素不能在元素的哪一侧浮动

通过使用两个值进行清除。您可以指定任何元素都不能在元素的右侧或左侧浮动。如下图所示：

   .actionBar{
      position: absolute;
      bottom: 20px;
      clear: both; // I think this should solve the problem
    }

---

也许你需要摆脱立场：绝对；同样

您要做的是将

.rightPanel

制作成

flexbox

元素，并给它

display:flex

和

flexdirection:column

。然后，只需给所有子项

flex grow:1

，除了

.actionBar

，您希望将其固定在底部。请注意，

.rightPanel

将需要一个

高度

，用于此顶部工作，此

高度

也应适应偏移

这可以从以下几点看出：

.rightPanel{
位置：固定；
右：0px；
顶部：20px；
显示器：flex；
弯曲方向：立柱；
高度：计算（100vh-（20px*2））；
}
.rightPanel>*{
柔性生长：1；
}
.actionBar{
flex-grow:0；
}

标题
身体
动作条

用于具有动态中间部分。这是一个有效的演示：

正文{
填充：0；
保证金：0；
}
.右面板{
显示器：flex；
弯曲方向：立柱；
位置：固定；
右：0px；
宽度：200px；
身高：100%；
边框：1px纯蓝色；
}
标题{
宽度：100%；
高度：30px；
边框：1px纯红；
}
.身体{
柔性生长：1；
宽度：100%；
身高：100%；
溢出：自动；
}
.actionBar{
宽度：100%；
高度：30px；
边框：1px纯红；
}

这是标题
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”
“除非偶尔因疏忽而死亡，否则不应因工作过失而受到动物劳动的惩罚。”
精英们，他们暂时参与了劳动和医疗活动。但是，在最小程度上，他们的工作是在普通消费品上进行的。他们的工作是在腐败的社会生活中进行的
除非偶尔出于谨慎，否则不应将软体动物视为劳动的罪魁祸首
在小规模的商业活动中，我们必须在公共消费品的实验室里进行实习。在自由的商业活动中，我们必须在不受任何限制的情况下进行实习
如果你不自以为是，就必须为自己的行为负责。”
这是操作栏

还不够清楚，您的预期结果是什么？如果您可以附加一些JSFIDLE，它会更容易…作为一个符咒工作。就为了让我明白是什么让身体占据了所有的空间？

高度是否为100%

，flex grow的用途是什么？我以为1是标准值