如何阻止内容在固定标题下滚动？答案

【问题标题】：How to Stop the content from scrolling under Fixed header?如何阻止内容在固定标题下滚动？
【发布时间】：2016-06-28 16:37:44
【问题描述】：

有一个包装器。然后是标题 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">

【问题讨论】：

标签： php html css stylesheet

【解决方案1】：

发生这种情况是因为您在该标题颜色中不透明 - 因此它背后的内容，您可以看穿。

一个简单的解决方法是在不透明的蓝色后面添加另一个白色 div。但是，你想把它放到你看不到标题的地方。

【讨论】：

不，我把它设置为透明以便我可以在这里解释...但我希望 红色边框 线停在 黑色菜单栏和不进入它....
然后用红色框修复元素，使其不会在您的固定标题下滚动。