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

需要将现有内容向上推，并使其溢出以腾出底部面板的空间。我不希望底部面板重叠页面上的任何内容，但那是发生了什么。设置底部填充也没有帮助。制作固定面板以推送内容而不是重叠

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

有没有办法实现这个使现有的内容将被拉高，以腾出空间的底部面板？

来源

2015-10-16 user299709

“位置：相对”在哪里？ –

@ochi它需要将现有内容向上推，并使其溢出以腾出底部面板的空间。我不希望底部面板重叠页面上的任何内容。 – user299709

是在底部固定的面板，当内容足够大时滚动到视线之外？ – ochi

好的，如果你有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>

来源

2015-10-16 00:15:39

似乎没有工作，因为它仍然结束过度疲劳 – user299709

在<body>设置一些padding-bottom值，使值相同的高度固定元件。您可以使用视口单元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

来源

2015-10-16 02:27:27 Stickers

试试这个：

#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; 
}

这应该给你的结果。希望这有助于！

来源

2015-10-16 02:37:12 Arqetech

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

回答

相关问题