CSS - スクロールと100％の高さでオーバーフローで固定された範囲内の絶対

Question

私は、サイトの残りの部分を空白にする何らかの種類のスクロール可能なオーバーレイを作成しようとしています。 固定要素内の絶対要素の高さが100％にならないようです。

http://codepen.io/intellix/pen/GBltK

section { 
    background: red; 
    position: fixed; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    overflow-x:auto; 

} 

article { 
    background: blue; 
    position: absolute; 
    top:0; 
    width:300px; 
    bottom: 0; 
    left: 0; 
} 

私が一番下に設定した場合：0;絶対的な要素では、ページがオーバーフローしないときに高さを塗りつぶします。ページがオーバーフローすると、それはギャップを残します。

絶対的な要素にbottom：autoを使用すると、オーバーフローで高さが塗りつぶされますが、オーバーフローすることなくギャップが残ります。

コンテンツが収まるようにウィンドウのサイズを変更してからサイズを変更してもコンテンツが収まらない場合は、どちらの場合でも動作しないことがわかります。

Answer 1

ミニ高さとボトムを使用したいと思います：ここではautoです。

article { 
    background: blue; 
    position: absolute; 
    top:0; 
    width: 300px; 
    bottom: auto; 
    min-height: 100%; 
    left: 0; 
} 

それは高さだスクロール可能にsection内容は実際には100％より大きい場合ので、あなたがmin-height:100%;を必要とheight:100%;を使用することができない理由があります。

長いexplination：位置付け（position: relative|fixed|absolute;）素子、パーセンテージベースの高さを有する

は、そのオフセット親に対して決定されます。 article要素の場合、offsetの親はsection要素です。

section要素は、高さを決定するためにtop:0px;とbottom:0px;を使用します。これらの値は、html要素

htmlあなたのスクロール可能な要素が100％を超える高さを持っている理由ですheight:100%;が表示可能なウィンドウのサイズである特別な場合、あるあるそれはオフセットの親の高さによって決定されています。