固定小間内のオーバーフローdiv

Question

かなり私はすでに私が欲しいものを持っています。 overflow-y div内の画面からスクロール可能な場合はスクロールできますが、オーバーフローが発生するとオプション8までスクロールして表示されません。これはなぜですか、どうすれば修正できますか？ #scrollableはdiv要素の100％の高さを取得しないように、このメニューでも、それのいくつかのスペースを取るので、あなたがcalc()と#scrollableのdivの高さを計算する必要が

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#fixed { 
 
    width: 300px; 
 
    height: 100%; 
 
    max-height: 345px; 
 
    position: fixed; 
 
    background: #333; 
 
    border: 2px solid #333; 
 
} 
 
#menu { 
 
    background: pink; 
 
    line-height: 25px; 
 
    padding-left: 20px; 
 
} 
 
#scrollable { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow-y: auto; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 
ul li a { 
 
    color: white; 
 
    line-height: 40px; 
 
    padding-left: 20px; 
 
    display: block; 
 
} 
 
ul li a:hover { 
 
    background: blue; 
 
}

<div id="fixed"> 
 
    <div id="menu"> 
 
    Hello 
 
    </div> 
 
    <div id="scrollable"> 
 
    <ul> 
 
     <li><a>Option 1</a></li> 
 
     <li><a>Option 2</a></li> 
 
     <li><a>Option 3</a></li> 
 
     <li><a>Option 4</a></li> 
 
     <li><a>Option 5</a></li> 
 
     <li><a>Option 6</a></li> 
 
     <li><a>Option 7</a></li> 
 
     <li><a>Option 8</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

https://jsfiddle.net/3hm1rxut/2/

Answer 1

。

height: calc(100% - 30px);

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#fixed { 
 
    width: 300px; 
 
    height: 100%; 
 
    max-height: 345px; 
 
    position: fixed; 
 
    background: #333; 
 
    border: 2px solid #333; 
 
} 
 
#menu { 
 
    background: pink; 
 
    line-height: 25px; 
 
    padding-left: 20px; 
 
} 
 
#scrollable { 
 
    position: absolute; 
 
    height: calc(100% - 30px); 
 
    width: 100%; 
 
    overflow-y: auto; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 
ul li a { 
 
    color: white; 
 
    line-height: 40px; 
 
    padding-left: 20px; 
 
    display: block; 
 
} 
 
ul li a:hover { 
 
    background: blue; 
 
}

<div id="fixed"> 
 
    <div id="menu"> 
 
    Hello 
 
    </div> 
 
    <div id="scrollable"> 
 
    <ul> 
 
     <li><a>Option 1</a></li> 
 
     <li><a>Option 2</a></li> 
 
     <li><a>Option 3</a></li> 
 
     <li><a>Option 4</a></li> 
 
     <li><a>Option 5</a></li> 
 
     <li><a>Option 6</a></li> 
 
     <li><a>Option 7</a></li> 
 
     <li><a>Option 8</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

あなたの問題を達成するための複数の方法があります。私はこのようにします：

#scrollable divにパディングトップを追加し、#menu div絶対にします。 divdivにz-indexを追加して、上部に置きます。また、割り当てられたサイズを超えないように、すべての要素にbox-sizing: border-boxを必ず追加してください。 #FIXEDのdivのための固定：あなたがポジションを追加したいのはなぜ

* { 
    margin: 0; 
    padding: 0; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#fixed { 
    width: 300px; 
    height: 100%; 
    max-height: 345px; 
    position: fixed; 
    background: #333; 
    border: 2px solid #333; 
} 
#menu { 
    background: pink; 
    line-height: 25px; 
    padding-left: 20px; 
    position: absolute; 
    width: 100%; 
    z-index: 10; 
} 
#scrollable { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    overflow-y: auto; 
    padding-top: 25px; 
} 

ul { 
    list-style: none; 
} 
ul li a { 
    color: white; 
    line-height: 40px; 
    padding-left: 20px; 
    display: block; 
} 
ul li a:hover { 
    background: blue; 
} 

Answer 3

変更この

#scrollable { 
    position: absolute; 
    height: calc(100% - 20px);/* height shall not be 100% but rather (100%) - (half the line-height of li)*/ 
    width: 100%; 
    overflow-y: auto; 
}