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属性指示浮动元素不能在元素的哪一侧浮动。

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

const input1 = "XYZVCAD"
const input2 = "erkjguherkluagheruhg"

function mask(str){
    return str.split('').map((ch, index) => 'BLA'[index % 3]).join('')
}

console.log(mask(input1))
console.log(mask(input2))

也许您需要摆脱位置：绝对；以及

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>

右面板底部有div

3 个答案: