Question

它需要将现有内容向上推，并使其溢出以为底部面板腾出空间。我不希望底部面板与页面上的任何内容重叠，但这就是正在发生的事情。设置底部填充也没有帮助。

#panel {
    bottom: 0%;
    width: 100%;
    height: 25%;
    z-index:500;
    position: fixed;
    background-color: white;
    border-top: 1px solid #ddd;
}

有没有办法实现这一目标，以便推动现有内容为底部面板腾出空间？

Answer 1

好的，如果你身体有padding-bottom，它会被推高。

#panel {
  bottom:0%;
  width: 100%;
  height: 50px;
  z-index:500;
  position: fixed;
  background-color: white;
  border-top: 1px solid #ddd;
}

body {
  padding-bottom: 55px;
}

<div id='panel'>Hi Hello</div>
<pre>
    asd
    asfd
    
    
    asdf
    
    
    asdf
    
    
    
    
    asdf
    
    
    
    asdf
    
    
    
    
    asdf
    
    
    
    asdf
    
    
    asdf
    
    
    asdf
    
    
    asdf
    
    
    asdfsdaf
    
    
    
    sadf
    
    
    asdf
    
    
    
    asdf
    
    
    
    asdf
    
    
    
    sadf
    
    
    dsfsadf
    
    
    asddfasdf
    
    
    asdfasf
    
    asdfsdaf
</pre>

Answer 2

在padding-bottom上设置一些<body>值，使其值与固定元素的高度相同。您可以使用视口单元vh而不是百分比%，因为百分比padding / margin始终相对于包含块的宽度，而不是高度。

body {
    padding-bottom: 25vh;
}
#panel {
    bottom: 0%;
    width: 100%;
    height: 25%; /*or 25vh*/
    z-index: 500;
    position: fixed;
    background-color: white;
    border-top: 1px solid #ddd;
}

<强> jsfiddle

Answer 3

试试这个：

#panel {
    bottom: 0;
    width: 100%;
    height: 98px;
    z-index: 500;
    position: fixed;
    background-color: white;
    border-top: 1px solid #ddd;
}

pre {
    position: absolute;
    overflow-y: auto;
    width: 100%;
    top: 0px;
    bottom: 98px;
    margin: 0px;
}

这应该会给你结果。希望这有帮助！

制作固定面板以推送内容而不是重叠

3 个答案: