オーバーフローでスクロールしながら完全なdivを取得するにはどうすればよいですか？

Question

私はabsoluteのdivとfloatされたdivの組み合わせを下に配置しました。 CSSのみを使用して、絶対配置されたdivがどれくらい大きくても小さくても、スクロール全体でオレンジとブルーのdivを完全な高さにすることはできますか？

これは明らかにされていない可能性があるため、絶対配置されたdivは高さが動的なので、事前にそのことを知ることはできません。高さはデモ目的で設定されています。唯一のCSSを使用した

.container { 
 
    width: 250px; 
 
    height: 250px; 
 
    border: 1px solid red; 
 
    overflow-y: scroll; 
 
    position: relative; 
 
} 
 

 
.block { 
 
    float: left; 
 
    position: static; 
 
    min-height: 100%; 
 
} 
 

 
.block1 { 
 
    width: 100px; 
 
    border-right: 1px solid black; 
 
    background: blue; 
 
} 
 

 
.block2 { 
 
    width: 120px; 
 
    border-right: 1px solid black; 
 
    background: orange; 
 
} 
 

 
.overlay { 
 
    width: 10px; 
 
    background: yellow; 
 
    height: 500px; 
 
    position: absolute; 
 
    left: 10px; 
 
}

<div class='container'> 
 
    <div class='block block1'>block1</div> 
 
    <div class='block block2'>block2</div> 
 
    <div class='overlay'></div> 
 
    </div>

Answer 1

、あなたはブルーとオレンジのボックスの高さをするつもりだ最もダイナミックは彼らに100％の高さを与えることです。たとえそれが含まれている要素（container）の最大の高さを与えるでしょう。青とオレンジのボックスの高さを絶対メンバの高さに等しくする唯一の方法は、青とオレンジのボックスに絶対メンバと同じ高さの大きさ（500px）を与えることです。

.container { 
 
    width: 250px; 
 
    height: 250px; 
 
    border: 1px solid red; 
 
    overflow-y: scroll; 
 
    position: relative; 
 
} 
 

 
.block { 
 
    float: left; 
 
    position: static; 
 
    min-height: 100%; 
 
} 
 

 
.block1 { 
 
    width: 100px; 
 
    height: 500px; 
 
    border-right: 1px solid black; 
 
    background: blue; 
 
} 
 

 
.block2 { 
 
    width: 120px; 
 
    height: 500px; 
 
    border-right: 1px solid black; 
 
    background: orange; 
 
} 
 

 
.overlay { 
 
    width: 10px; 
 
    background: yellow; 
 
    height: 500px; 
 
    position: absolute; 
 
    left: 10px; 
 
}

<div class='container'> 
 
    <div class='block block1'>block1</div> 
 
    <div class='block block2'>block2</div> 
 
    <div class='overlay'></div> 
 
    </div>

絶対部材の高さを動的に（どのような場合に）修飾されようとしている場合、CSSプリプロセッサなしで、jQueryのまたはJavaScriptを使用して簡単な代替であろう。しかし、あなたはCSSについてのみ心配していると述べているので、絶対配置された要素は静的な高さ500pxに留まると仮定しています。

Answer 2

これを行う1つの方法は、containerに明示的な高さを設定しないで、blockの高さを100%に設定することです。

block, container { 
    height: 100%; 
}