フレックスボックスレイアウト行がブラウザウィンドウの残りの垂直スペースを消費するようにするにはどうすればよいでしょうか?
3 行の flexbox レイアウトがあります。最初の 2 行は高さが固定されていますが、3 行目は動的で、ブラウザーの高さいっぱいまで拡大したいと考えています。
行 3 に別のフレックスボックスがあり、列のセットを作成します。これらの列内の要素を適切に調整するには、背景色やベースでのアイテムの配置など、ブラウザー全体の高さを理解する必要があります。主要なレイアウトは最終的に次のようになります。
.vwrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
//height: 1000px;
}
.vwrapper #row1 {
background-color: red;
}
.vwrapper #row2 {
background-color: blue;
}
.vwrapper #row3 {
background-color: green;
flex 1 1 auto;
display: flex;
}
.vwrapper #row3 #col1 {
background-color: yellow;
flex 0 0 240px;
}
.vwrapper #row3 #col2 {
background-color: orange;
flex 1 1;
}
.vwrapper #row3 #col3 {
background-color: purple;
flex 0 0 240px;
}<body>
<div class="vwrapper">
<div id="row1">
this is the header
</div>
<div id="row2">
this is the second line
</div>
<div id="row3">
<div id="col1">
col1
</div>
<div id="col2">
col2
</div>
<div id="col3">
col3
</div>
</div>
</div>
</body>属性を追加しようとしましたがheight、これを固定数値に設定すると機能しますが、に設定すると機能しません100%。コンテンツがブラウザ ウィンドウを埋め尽くさないため機能していないことは理解していますheight: 100%が、フレックスボックス レイアウトを使用してこのアイデアを再現できますか?
ベストアンサー1
完全な高さを継承するために、を にheight設定し、他の値ではなくより大きい値を設定する必要があります。html, body, .wrapper100%flex1.row3
.wrapper, html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
#row1 {
background-color: red;
}
#row2 {
background-color: blue;
}
#row3 {
background-color: green;
flex:2;
display: flex;
}
#col1 {
background-color: yellow;
flex: 0 0 240px;
min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col2 {
background-color: orange;
flex: 1 1;
min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col3 {
background-color: purple;
flex: 0 0 240px;
min-height: 100%;/* chrome needed it a question time , not anymore */
}<div class="wrapper">
<div id="row1">this is the header</div>
<div id="row2">this is the second line</div>
<div id="row3">
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
</div>
</div>編集: @Basj が言及しているように、コードは短縮できます。また、現在では広く実装されているグリッドを使用することもできます。以下は訪問者用のグリッドの例です。
body {
height: 100vh;
display: grid;
grid-template-rows: auto auto 1fr;
margin: 0;
background-color: orange;
grid-template-columns: 240px 1fr 240px;
}
[id^=row]{ grid-column: 1/-1 }
#row1 { background-color: red; }
#row2 { background-color: blue; }
#row3 { background-color: green; }
#col1 { background-color: yellow; }
#col3 { background-color: purple; }<div id="row1">this is the header</div>
<div id="row2">this is the second line</div>
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>