html - 行の高さとオーバーフローの問題を予期していないときにスクロールバーが表示される

Question

垂直スクロールバーが表示されるという、(私にとって) 予期しない動作が発生しています。コンテナの高さの制約が何であるかわかりません。

LI の margin:1 を変更するか、UL の lineheight: normal を 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; 
}

score 0 · Accepted Answer

オーバーフローを自動に設定する必要がある理由がわかりません。削除すると問題は解決します

コンテンツセクションを特定の高さにする必要がある場合は、高さを設定すると、必要に応じてスクロールバーが表示されます (オーバーフローが必要な場合)。

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

3 に答える 3