如何在固定標題下停止滾動內容？

有一個包裝。然後是標題10％; 然後部分：最小高度：80％; 高度自動;如何在固定標題下停止滾動內容？

screenshot ---> This is overlapping going under header 當我滾動時，內容在標題下。我希望事情就此打住...... Screenshot---> This is normal

#wrapper{ 
position:absolute; 
padding-top:50px; 
height:100%; 
width:100%; 
top:150px; 
left:0; 
margin:0; 
border:2px soild green;/**/ 
} 


header { 
position:fixed; 
top:0; 
left:0; 
    background-color:#2e72ce; 
float:top; 
color:black;   
text-align:center; 
margin:0; 
opacity:0.4; 
padding:0px; 
overflow-x:hidden; 
width:100%; 
height:calc(10% - 9px); 
z-index:9999; 
clear:both;

}

#main_section { 

position:relative; 
top:-50px;   /*-5px proper location */ 
float:left; 
padding-top:0; 
padding-left:60px; 
width:95%; 
bottom:0; 
right:0; 
min-height:80%; 
height:auto; 
border:2px solid red;/**/

}

<html><!----HTML FIle----> 
<body > 
    <div id="wrapper"> 
     <header> 
      <img src="img/ztlogo.png" height="50px"/> 
     </header> 
       <section id="main_section">

來源

2016-03-13 Mustafa jD

這是因爲這樣的標題顏色混濁的發生的 - 因此有什麼背後它，你可以看透。

一個簡單的修復可能是在藍色不透明顏色後面添加另一個白色div。但是，您希望將其設置在無法看到標題的位置。

來源

2016-03-13 18:53:13 gwalshington

不，我使它**透明**，以便我可以在這裏解釋它... 但我想** **紅色邊框**線停止在**黑色菜單欄**並且_不再下降它.... –

然後用紅色方塊修復元素，使其不會在固定標題下滾動。 – gwalshington

如何在固定標題下停止滾動內容？

回答

相關問題