固定スクロールバー
これにより、常に表示される要素にスクロールバーが表示されます。コンテンツが少なく、スクロールする必要がない場合、スクロールバーはそのまま残り、無効としてスタイルが設定されます。
.scroll{
overflow: scroll;
height: 100px;
}
スクロールバー、必要な場合のみ
これにより、必要に応じてスクロールバーが表示されます。スクロールする必要がないコンテンツが少ない場合、スクロールバーは表示されません。これは見栄えが良く、幅も取りません。
.scroll{
overflow: auto;
height: 100px;
}
文書型
インラインコーディングが奇妙なことをしている理由は、不適切な doctype が原因である可能性もあります。これを定義する必要があります。最近の一般的な慣習は<!DOCTYPE HTML>
. それをhtmlファイルの最初に配置するだけで、その後に続きます<html>
例
.example_auto{
height: 75px;
overflow: auto;
width: 24%; /* just for demo */
display: inline-block; /* just for demo */
vertical-align: top; /* just for demo */
background: #FFC; /* just for demo */
}
.example_scroll{
height: 75px;
overflow: scroll;
width: 24%; /* just for demo */
display: inline-block; /* just for demo */
background: #FCF; /* just for demo */
}
<div class="example_auto">This is too little content to scroll.</div>
<div class="example_scroll">This is too little content to scroll.</div>
<div class="example_auto">This div has waaaaay more content en will need a scrollbar. This will look almost the same in both cases.</div>
<div class="example_scroll">This div has waaaaay more content en will need a scrollbar. This will look almost the same in both cases.</div>