右面板，底部有div

Question

簡單起見：我有一個帶有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>

我不想給身體一個固定的高度，因為它是動態裝箱的。

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/

Answer 2

您可以使用clear屬性。

clear屬性指示浮動元素不能在元素的哪一側浮動。

通過同時使用兩個值進行清除。 您可以指定沒有元素不能在元素的右側或左側浮動。 如下所示：

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

也許您需要擺脫位置：絕對； 以及

Answer 3

您需要做的是使.rightPanel成為一個flexbox元素，並為其display: flex和flex-direction: column 。 然后，簡單地給所有子代flex-grow: 1 ， 除了 .actionBar ，您要將其固定在底部。 請注意， .rightPanel將需要一個height才能完成此頂部工作，並且該height還應包含偏移量。

可以在以下內容中看到：

 .rightPanel { position: fixed; right: 0px; top: 20px; display: flex; flex-direction: column; height: calc(100vh - (20px * 2)); } .rightPanel > * { flex-grow: 1; } .actionBar { flex-grow: 0; } 

 <div class="rightPanel"> <header>Header</header> <div class="body">Body</div> <div class="actionBar">Action Bar</div> </div>