Flexbox düzenimin% 100 dikey alan kaplamasını nasıl sağlayabilirim?

102

Bir flexbox düzen satırının bir tarayıcı penceresinde kalan dikey alanı kullandığını nasıl anlarım?

3 sıralı flexbox düzenim var. İlk iki satır sabit yüksekliktedir, ancak 3. satır dinamiktir ve tarayıcının tam yüksekliğine kadar büyümesini istiyorum.

görüntü açıklamasını buraya girin

Satır 3'te bir dizi sütun oluşturan başka bir flexbox'ım var. Bu sütunlardaki öğeleri düzgün şekilde ayarlamak için, tarayıcının tam yüksekliğini anlamalarına ihtiyacım var - tabanda arka plan rengi ve öğe hizalamaları gibi şeyler için. Ana düzen sonuçta şuna benzeyecektir:

görüntü açıklamasını buraya girin

.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>

Snippet'i genişlet

heightSabit bir sayıya ayarladığımda işe yarayan, ancak ayarladığımda işe yarayan bir öznitelik eklemeyi denedim 100%. height: 100%Çalışmadığını anlıyorum , çünkü içerik tarayıcı penceresini doldurmuyor, ancak flexbox düzenini kullanarak fikri kopyalayabilir miyim?

html css flexbox

— Kötü Dolap Maymunu
kaynak

Görsellere oy verin, onları nasıl yaptınız?

— Jonathan

Rötuşlar için OmniGraffle ve Pixelmator.

— Evil Dolap Maymun

Yanıtlar:

115

Sen belirlesin heightarasında html, body, .wrapperhiç 100%(miras tam yüksekliğe sırayla) ve sonra sadece bir set flexdaha değer büyüktür 1için .row3başkalarına değil.

.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>

Snippet'i genişlet

DEMO

— G-Cyrillus
kaynak

Bunu, içerik div'lerini içeriklerini dolduracak şekilde genişletirken yapmanın bir yolu var mı? Örneğinizi burada çatalladım .

— iameli

@iameli, yükseklik fiddle.jshell.net/Lhhh3wde/1

— G-Cyrillus

JSFiddle bozuldu

— Joel Peltonen

İşte çalışan kodepen demosu: codepen.io/mprinc/pen/JjGQvae ve benzer sorudaki açıklama: stackoverflow.com/a/63174085/257561

— mPrinC

keman, kaybolmaması gereken bir codepen ile değiştirilir, bu parçacığın bir kopyasıdır. Min-yüksekliğin bugünün krom sürümünde artık gerekli olmadığını unutmayın .

— G-Cyrillus

sargıyı% 100 yüksekliğe ayarlayın

.vwrapper {
  display: flex;
  flex-direction: column;

  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;

  height: 100%;
}

ve 3. satırı flex-Grow olarak ayarlayın

#row3 {
   background-color: green;
   flex: 1 1 auto;
   display: flex;
}

demo

— vals
kaynak

Benim durumumda html, body, .wrapper {boy: 100%; } çalışıyor. sadece sarmalayıcı çalışmıyor.

— gnganapath

Size% 100 çalışan başka bir yol göstermeme izin verin. Örnek için biraz dolgu ekleyeceğim.

<div class = "container">
  <div class = "flex-pad-x">
    <div class = "flex-pad-y">
      <div class = "flex-pad-y">
        <div class = "flex-grow-y">
         Content Centered
        </div>
      </div>
    </div>
  </div>
</div>

.container {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
}

  .flex-pad-x {
    padding: 0px 20px;
    height: 100%;
    display: flex;
  }

  .flex-pad-y {
    padding: 20px 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .flex-grow-y {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   }

Gördüğünüz gibi, bunu esnek büyüme ve esnek yön özelliğini kullanırken kontrol için birkaç paketleyici ile başarabiliriz.

1: "flex-direction" üst öğesi bir "satır" olduğunda, alt öğesi "flex-Grow" yatay olarak çalışır. 2: "flex-direction" üst öğesi "sütunlar" olduğunda, alt öğesi "flex-Grow" dikey olarak çalışır.

Bu yardımcı olur umarım

Daniel

— GaddMaster
kaynak

divaşırı yükleme.

— John

Birini kaldırabilirsiniz flex-pad-y:)

— Eoin

Güzel..! Bu, "içeriğimin" <div> (üstbilgi ve altbilgi arasında) tüm ekran yüksekliğini doldurmasını sağlayan tek örnektir. Diğer tüm örnekler "yükseklik:% 100" özelliğini yok sayıyor gibi görünüyor.

— Mike Gledhill

Harika bir çözüm. John'un yukarıda DIV aşırı öldürdüğünü söylediğini biliyorum, ancak katılmıyorum. Esnek büyümeyi hem yatay hem de dikey olarak kullanmak için dört div'e ihtiyacınız var (Dikey olarak önemliydi!). Yardımcı olduğuma sevindim ! Dört DIV'ye sahip olmak size çok fazla esneklik sağlar. DIV'leri kaldırmaya başladığınızda, bu esneklik azalmaya başlar!

— GaddMaster