當內容添加到與高度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>