当内容添加到与高度div的内容时，防止正文元素上的垂直滚动：100％

Question

问题是我不希望滚动条在正文上时，我附加滚动div上面的一些内容。

当我尝试使div高度小于100％时，身体上的滚动条消失，但是当我调整窗口大小时，滚动条再次出现在身体上。

这是我尝试做的一个fiddle示例。

* {margin:0;padding:0;} 
 
    html, body{ 
 
     height:100%; 
 
     background:#eee; 
 
    } 
 
    #menu { 
 
     background:#ccc; 
 
     width:220px; 
 
     height:100%; 
 
    } 
 
    .wrapper { 
 
     height: 100%; 
 
    } 
 
    #menu ul { 
 
     height: 100%; 
 
     overflow: auto; 
 
    }  

<div class="wrapper"> 
 
<p> 
 
    some other content 
 
    </p> 
 
    <p> 
 
    some other content 
 
    </p> 
 
    <p> 
 
    some other content 
 
    </p> 
 
<div id="menu"> 
 
    
 
    <ul> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

revised fiddle

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    background: #eee; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 

 
#menu { 
 
    background: #ccc; 
 
    width: 220px; 
 
    flex: 1; /* use all available height */ 
 
    overflow: auto; 
 
}

<div class="wrapper"> 
 
    <p>some other content</p> 
 
    <p>some other content</p> 
 
    <p>some other content</p> 
 
    <div id="menu"> 
 
    <ul> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
    </ul> 
 
    </div> 
 
</div>