0

比較的サイズの大きい垂直 div 内にオーバーフローを作成すると問題が発生します。

ここにフィドルがあります：http://jsfiddle.net/ZgL59/

基本的に、1 つの大きな垂直列があり、その中に 2 つのパーセンテージ ベースの div があります。一番下の div には、その div よりも大きいコンテンツがあり、overflow-y:scroll が付いています。

ただし、フィドルでわかるように、ブラウザーによってはコンテンツの下部が切り取られます (フィドルの最後の「Y」は完全には表示されません)。これはブラウザに依存します。これに対する修正はありますか？さまざまな高さを持つすべてのブラウザーを喜ばせようとするうさぎの穴に落ちたくありません。

HTMLは次のとおりです。

 <div class="container">
     <div class="inner1">X</div>
     <div class="inner2">
         Tons of Content...
     </div>
 </div>

そしてCSS：

 html, body {
    height:100%;
    overflow:hidden;
 }

 .container {
    height:100%;
    background:blue;
 }

 .inner1 {
    height:30%;
    background:red;
 }

 .inner2 {
    height:70%;
    background:green;
    overflow-y: scroll;
 }
4

1 に答える 1

1

「カットオフ」の意味を正しく考えている場合は、このfiddlemarginを参照してください。ボディにandpaddingを設定すると0px修正されます。Chrome、FF、およびIE10でテストされ、問題ないように見えます（質問を理解していれば）。

于 2013-11-12T12:43:56.193 に答える