スクロール内部DIV

Question

は、私は次のようにDIVの構造を有する：

<DIV id="main"> 
    <DIV id="header"> 
    </DIV> 
    <DIV id="inside"> 
    </DIV> 
</DIV> 

をそして、これは

|________________| 
|    | 
| |----------| | 
| | header | | 
| |   | | 
| |----------| | 
|    | 
| |----------| | 
| | inside | | 
| |   | | 
|__|__________|__| 
    |   | 
    |   | 
    |   | 
    |----------| 

メインのdivは300ピクセルと私のセットアップのdivなどの固定の高さを持っているレイアウトです余分な内容を表示しないようにするために以下のようにします。

#main{ 
    height: 300px; 
    overflow: hidden; 
} 

header divは内部に<SPAN>の1行しかないためスタイルがありません。

内のdiv は実際にはコンテンツがオーバーフローしていますが、コンテンツをスクロールするスクロールバーは表示されません。私のセットアップ以下のようにdivが：

#inside{ 
    overflow-y:auto; 
} 

何が起こるかというと、ヘッダがそこに滞在しなければならないと内側のdivはコンテンツのオーバーフローの場合、垂直スクロールバーを表示する必要があることです。 どうすれば実現できますか？

Answer 1

親タグに固定高さを指定する場合は、内側のタグでも何かを行う必要があります。

、修正高さを与えるので、ここなど

をCALCの高さを与えるには、答えをあなたのための周りを再生するcodepenです。了解

#main{ 
 
    height: 300px; 
 
    overflow: hidden; 
 
} 
 
#header 
 
{ 
 
    width:100%; 
 
    height:25px; 
 
} 
 
#inside{ 
 
    overflow:auto; 
 
    height:275px; 
 
}

<DIV id="main"> 
 
    <DIV id="header"> 
 
    <span>title</span> 
 
    </DIV> 
 
    <DIV id="inside"> 
 
    dsfdsfds 
 
    <br/> 
 
    ff 
 
    <br/> 
 
    sdf 
 
    <br/> 
 
    dsf 
 
    <br/> 
 
    dsf 
 
    <br/> 
 
    ds 
 
    <br/> 
 
    fsd 
 
    <br/> 
 
    fsd 
 
    <br/> 
 
    fds 
 
    <br/> 
 
    feds 
 
    <br/> 
 
    rewr 
 
    <br/> 
 
    few 
 
    <br/> 
 
    re 
 
    <br/> 
 
    rf 
 
    <br/> 
 
    dsf 
 
    <br/> 
 
    dsf 
 
    <br/> 
 
    dsf 
 
    <br/> 
 
    ds 
 
    <br/> 
 
    fds 
 
    <br/> 
 
    fsd 
 
    <br/> 
 
    fds 
 
    <br/> 
 
    f<br/> 
 
    dsf 
 
    <br/> 
 
    dsf 
 
    <br/> 
 
    d 
 
    </DIV> 
 
</DIV>

Answer 2

試してみてください。

#main{ 
    height: 300px; 
    overflow: hidden; 
} 
#inside{ 
    height: 300px; 
    overflow-y: scroll; 
} 

Answer 3

<pre><style> 
#main{ 
    height: 300px; 
    overflow-y: scroll; 
} 
</style> 
</pre> 

Answer 4

あなたはこのようなことをスクロール可能にするinside divに高さを定義する必要があります。overflow-y:scrollで

#inside{ 
overflow-y:scroll; /* scrolls when content overflows */ 
height: 100px; 
} 

、コンテンツがありますクリップされたスクロール機構ismが提供されます。スクロールはdivにheightを指定した場合にのみ表示されます。コンテンツがオーバーフローすると、定義された高さのスクロールが表示されます。