製作固定面板以推送內容而不是重疊

需要將現有內容向上推，並使其溢出以騰出底部面板的空間。我不希望底部面板重疊頁面上的任何內容，但那是發生了什麼。設置底部填充也沒有幫助。製作固定面板以推送內容而不是重疊

#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

製作固定面板以推送內容而不是重疊

回答

相關問題