Bagaimana cara membuat tata letak flexbox saya mengambil 100% ruang vertikal?

102

Bagaimana cara mengetahui baris tata letak flexbox mengonsumsi ruang vertikal yang tersisa di jendela browser?

Saya memiliki tata letak flexbox 3 baris. Dua baris pertama memiliki tinggi tetap, tetapi baris ketiga dinamis dan saya ingin membuatnya setinggi browser.

masukkan deskripsi gambar di sini

Saya memiliki flexbox lain di baris-3 yang membuat satu set kolom. Untuk menyesuaikan elemen dengan benar dalam kolom ini, saya membutuhkannya untuk memahami ketinggian penuh browser - untuk hal-hal seperti warna latar belakang dan perataan item di pangkalan. Tata letak utama pada akhirnya akan menyerupai ini:

masukkan deskripsi gambar di sini

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

Luaskan cuplikan

Saya sudah mencoba menambahkan heightatribut, yang berfungsi saat saya menyetelnya ke angka pasti tetapi tidak saat saya menyetelnya 100%. Saya mengerti height: 100%tidak berfungsi, karena konten tidak mengisi jendela browser, tetapi dapatkah saya mereplikasi ide tersebut menggunakan tata letak flexbox?

html css flexbox

— Monyet Lemari Jahat
sumber

Suka untuk visual, bagaimana Anda membuatnya?

— Jonathan

OmniGraffle, dan Pixelmator untuk sentuhan.

— Evil Closet Monkey

Jawaban:

115

Anda harus menetapkan heightdari html, body, .wrapperke 100%(untuk tinggi penuh mewarisi) dan kemudian hanya menetapkan flexlebih besar nilai dari 1untuk .row3dan bukan pada orang lain.

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

Luaskan cuplikan

DEMO

— G-Cyrillus
sumber

Adakah cara untuk melakukan ini sementara juga membuat div konten meluas untuk mengisi isinya? Garpu contoh Anda di sini .

— iameli

@iameli, gunakan min-height untuk chrome, bukan height fiddle.jshell.net/Lhhh3wde/1

— G-Cyrillus

JSFiddle dipatahkan

— Joel Peltonen

Berikut adalah demo codepen yang berfungsi: codepen.io/mprinc/pen/JjGQvae dan penjelasan dalam pertanyaan serupa: stackoverflow.com/a/63174085/257561

— mPrinC

biola diganti dengan codepen yang tidak boleh hilang, itu adalah salinan dari potongan. Perhatikan bahwa min-height tidak diperlukan lagi dalam versi chrome hari ini.

— G-Cyrillus

atur pembungkus ke tinggi 100%

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

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

  height: 100%;
}

dan atur baris ke-3 menjadi flex-grow

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

demo

— vals
sumber

Dalam kasus saya html, body, .wrapper {height: 100%; } sedang bekerja. tidak hanya kerja pembungkus.

— gnganpath

Mari saya tunjukkan cara lain yang berhasil 100%. Saya juga akan menambahkan beberapa padding sebagai contoh.

<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;
   }

Seperti yang Anda lihat, kami dapat mencapai ini dengan beberapa pembungkus untuk kontrol sambil menggunakan atribut flex-grow & flex-direction.

1: Ketika induk "flex-direction" adalah "row", anaknya "flex-grow" bekerja secara horizontal. 2: Jika induk "flex-direction" adalah "kolom", anaknya "flex-grow" bekerja secara vertikal.

Semoga ini membantu

Daniel

— GaddMaster
sumber

divberlebihan.

— Yohanes

Anda dapat menghapus salah satu flex-pad-y:) Anda

— Eoin

Bagus..! Ini adalah satu-satunya contoh yang berhasil membuat "konten" saya <div> (di antara header dan footer saya) memenuhi seluruh tinggi layar. Semua contoh lainnya tampaknya mengabaikan atribut "height: 100%".

— Mike Gledhill

Ini adalah solusi yang keren. Saya tahu John mengatakan DIV di atas berlebihan, tapi saya tidak setuju. Anda membutuhkan empat div untuk memanfaatkan flex grow baik secara horizontal maupun vertikal (Vertikal yang terpenting!). Senang saya bisa membantu ! Memiliki empat DIV memberi Anda banyak fleksibilitas. Begitu Anda mulai mencoba menghapus DIV, fleksibilitas itu mulai layu!

— GaddMaster