繁体   English   中英

右面板,底部有div

[英]Right panel with div at bottom

简单起见:我有一个带有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>

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

使用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/

您可以使用clear属性。

clear属性指示浮动元素不能在元素的哪一侧浮动。

通过同时使用两个值进行清除。 您可以指定没有元素不能在元素的右侧或左侧浮动。 如下所示:

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

也许您需要摆脱位置:绝对; 以及

您需要做的是使.rightPanel成为一个flexbox元素,并为其display: flexflex-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> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM