line-heightとoverflow-yの問題を期待していないときにスクロールバーが表示される

Question

垂直スクロールバーが表示されている予期しない（私に）動作が発生しています。私はコンテナの高さの制約が何であるか理解していません。私はこの問題を作ることができています

はLIのマージンを変更するいずれかの方法で消える：1または ULのlineheight設定：誰もが実際に発生しているかを説明することができ代わりに1

の通常の？つまり、どの高さに私が超過しているのは、垂直スクロールバーが必要ですか？

非常に単純なJSFIDDLEを作成して、私が抱えている問題を説明しました。

HTMLコード：

<div class="content-section" > 
    <ul > 
    <li>cheese</li> 
    <li>crackers</li> 
    </ul> 
</div> 

CSSコード：

body { 
line-height: 1; 
} 

ul { 
    margin: 0; 
} 

.content-section { 
     overflow-y: auto; 
} 

Answer 1

あなたがautoに設定するオーバーフローを必要とする理由あなたがそれを削除した場合、私は、わからない問題は場合

を解決コンテンツセクションが特定の高さになる必要があり、次に高さを設定し、スクロールバーが必要な場合に表示されます（オーバーフローが必要な場合）

http://jsfiddle.net/pGuHG/2/

.content-section { 
    overflow-y: auto; 
    height: 100px; 
} 

Answer 2

あなたline-heightは、行の高さは、フォントサイズと同じであることを意味する、1に設定されているためです。これにより、フォントが少しオーバーフローします。あなたは推測したように、line-heightをテキストの高さより大きな値に設定する必要があります。テキストは技術的に振る舞う必要があります。ボックスの高さは、行の高さによって定義されますが、テキストは行よりもわずかに大きくなります。あなたの行の高さは、読みやすさの観点からあなたのフォントサイズと等しくなるべきではありません。私はこれが役立つことを願っています私は、高さがどこから来ているのかを正確には伝えていないことを知っていますが、あなたはそれを克服するための複数の手段を首尾よく検討していると思います。