pengembangan-web-mp-pd.com

Buat div mengisi ketinggian ruang layar yang tersisa

Saya sedang mengerjakan aplikasi web di mana saya ingin konten mengisi ketinggian seluruh layar.

Halaman memiliki header, yang berisi logo, dan informasi akun. Ini bisa menjadi ketinggian yang sewenang-wenang. Saya ingin div konten mengisi sisa halaman ke bawah.

Saya memiliki header div dan konten div. Saat ini saya menggunakan tabel untuk tata letak seperti:

CSS dan HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

Seluruh ketinggian halaman diisi, dan tidak perlu menggulir.

Untuk apa pun di dalam div konten, pengaturan top: 0; akan meletakkannya tepat di bawah header. Terkadang kontennya berupa tabel sungguhan, dengan ketinggian diatur hingga 100%. Meletakkan header di dalam content tidak akan memungkinkan ini berfungsi.

Apakah ada cara untuk mencapai efek yang sama tanpa menggunakan table?

Pembaruan:

Elemen-elemen di dalam konten div akan memiliki ketinggian yang ditetapkan ke persentase juga. Jadi sesuatu dengan 100% di dalam div akan mengisinya ke bawah. Seperti halnya dua elemen pada 50%.

Pembaruan 2:

Misalnya, jika tajuk mengambil 20% dari tinggi layar, tabel yang ditentukan 50% di dalam #content akan memakan 40% ruang layar. Sejauh ini, membungkus seluruh barang di meja adalah satu-satunya hal yang berhasil.

1574
Vincent McNabb

Pembaruan 2015: pendekatan flexbox

Ada dua jawaban lain yang menyebutkan flexbox ; Namun, itu lebih dari dua tahun yang lalu, dan mereka tidak memberikan contoh. Spesifikasi untuk flexbox sudah pasti ditentukan sekarang.

Catatan: Meskipun spesifikasi Tata Letak Kotak Fleksibel CSS berada pada tahap Rekomendasi Kandidat, tidak semua browser telah menerapkannya. Implementasi WebKit harus diawali dengan -webkit-; Internet Explorer mengimplementasikan versi spesifikasi yang lama, diawali dengan -ms-; Opera 12.10 mengimplementasikan versi terbaru dari spec, tidak diperbaiki. Lihat tabel kompatibilitas pada masing-masing properti untuk status kompatibilitas terbaru.

(diambil dari https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes )

Semua browser utama dan IE11 + mendukung Flexbox. Untuk IE 10 atau lebih, Anda dapat menggunakan shim FlexieJS.

Untuk memeriksa dukungan saat ini, Anda juga dapat melihat di sini: http://caniuse.com/#feat=flexbox

Contoh kerja

Dengan flexbox, Anda dapat dengan mudah beralih di antara baris atau kolom mana pun yang memiliki dimensi tetap, dimensi ukuran konten, atau dimensi ruang tersisa. Dalam contoh saya, saya telah mengatur tajuk agar snap ke kontennya (sesuai pertanyaan OP), saya telah menambahkan catatan kaki untuk menunjukkan cara menambahkan wilayah tinggi-tetap dan kemudian mengatur area konten untuk mengisi ruang yang tersisa.

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

Dalam CSS di atas, properti flex properti singkatan dari flex-grow , flex-shrink , dan flex-basis untuk menetapkan fleksibilitas item-item flex. Mozilla memiliki pengenalan yang baik untuk model kotak fleksibel .

856
Pebbl

Sebenarnya tidak ada cara lintas-browser yang sehat untuk melakukan ini dalam CSS. Dengan asumsi tata letak Anda memiliki kompleksitas, Anda perlu menggunakan JavaScript untuk mengatur tinggi elemen. Inti dari apa yang perlu Anda lakukan adalah:

Element Height = Viewport height - element.offset.top - desired bottom margin

Setelah Anda bisa mendapatkan nilai ini dan mengatur tinggi elemen, Anda harus melampirkan penangan acara ke jendela yang di-overload dan onresize sehingga Anda bisa menjalankan fungsi resize Anda.

Juga, dengan asumsi konten Anda bisa lebih besar dari viewport, Anda perlu mengatur overflow-y untuk menggulir.

216
NICCAI

Pos asli lebih dari 3 tahun yang lalu. Saya kira banyak orang yang datang ke posting ini seperti saya mencari solusi tata letak seperti aplikasi, katakanlah header, footer, dan konten penuh ketinggian yang entah bagaimana diperbaiki mengambil layar sisanya. Jika demikian, pos ini dapat membantu, berfungsi di IE7 +, dll.

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Dan berikut beberapa cuplikan dari pos itu:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}
<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>
160
h--n

Pendekatan CSS saja (Jika tinggi diketahui/diperbaiki)

Saat Anda ingin elemen tengah membentang di seluruh halaman secara vertikal, Anda dapat menggunakan calc() yang diperkenalkan dalam CSS3.

Dengan asumsi kita memiliki elemen ketinggian tetapheader dan footer dan kami ingin tag section mengambil seluruh ketinggian vertikal yang tersedia ...

Demo

Markup Diasumsikan

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

Jadi, seharusnya CSS Anda

html, body {
    height: 100%;
}

header {
    height: 100px;
    background: grey;
}

section {
    height: calc(100% - (100px + 150px)); 
    /* Adding 100px of header and 150px of footer */

    background: tomato;
}

footer {
    height: 150px;
    background-color: blue;
}

Jadi di sini, apa yang saya lakukan adalah, menjumlahkan tinggi elemen dan daripada mengurangi 100% menggunakan fungsi calc().

Pastikan Anda menggunakan height: 100%; untuk elemen induk.

81
Mr. Alien

Digunakan: height: calc(100vh - 110px);

kode:

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  
<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>
46
nguyên

Bagaimana kalau Anda cukup menggunakan vh yang merupakan view height di CSS ...

Lihat cuplikan kode yang saya buat untuk Anda di bawah ini dan jalankan:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>

Lihat juga gambar di bawah yang saya buat untuk Anda:

 Make a div fill the height of the remaining screen space

32
Alireza

CSS3 Cara Sederhana

height: calc(100% - 10px); // 10px is height of your first div...

semua browser utama saat ini mendukungnya, jadi silakan jika Anda tidak memiliki persyaratan untuk mendukung browser vintage.

30
dev.meghraj

Itu bisa dilakukan murni oleh CSS menggunakan vh:

#page 
{
  display:block; width:100%; height:95vh !important; overflow:hidden;
}
#tdcontent 
{
  float:left; width:100%; display:block;
}
#content 
{      
float:left; width:100%; height:100%; display:block; overflow:scroll;
}

dan HTML

<div id="page">
   <div id="tdcontent">
   </div>
   <div id="content">
   </div>
</div>

Saya memeriksanya, Ini berfungsi di semua browser utama: Chrome, IE, dan FireFox

26
Ormoz

Tidak ada solusi yang diposting yang berfungsi ketika Anda membutuhkan div bagian bawah untuk menggulir ketika konten terlalu tinggi. Inilah solusi yang berfungsi dalam kasus itu:

HTML:

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
}
.container {
  width: 400px;
  height: 300px;
}
.header {
  background: cyan;
}
.body {
  background: yellow;
  height: 100%;
}
.body-content-outer-wrapper {
  height: 100%;
}
.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}
.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Sumber asli: Mengisi Ketinggian Sisa Wadah Saat Menangani Overflow di CSS

Pratinjau langsung JSFiddle

25
John Kurlak

Solusi sederhana, menggunakan flexbox:

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}
<body>
  <div>header</div>
  <div class="content"></div>
</body>

Sampel codepen

Solusi alternatif, dengan div dipusatkan di dalam div konten

23
zok

Saya telah mencari jawaban untuk ini juga. Jika Anda cukup beruntung untuk dapat menargetkan IE8 dan yang lebih tinggi, Anda dapat menggunakan display:table dan nilai terkait untuk mendapatkan aturan rendering tabel dengan elemen level blok termasuk div.

Jika Anda bahkan lebih beruntung dan pengguna Anda menggunakan browser tingkat atas (misalnya, jika ini adalah aplikasi intranet pada komputer yang Anda kontrol, seperti proyek terbaru saya), Anda dapat menggunakan Tata Letak Kotak Fleksibel baru di CSS3 !

22
Chris

Apa yang berhasil untuk saya (dengan div dalam div lain dan saya berasumsi dalam semua keadaan lain) adalah untuk mengatur bantalan bawah ke 100% Artinya, tambahkan ini ke css/stylesheet Anda:

padding-bottom: 100%;

Penafian: Jawaban yang diterima memberikan ide solusi, tapi saya merasa sedikit membengkak dengan aturan pembungkus dan css yang tidak perlu. Di bawah ini adalah solusi dengan sedikit aturan css.

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

Solusi di atas menggunakan unit viewport dan flexbox , dan karenanya IE10 +, menyediakan Anda menggunakan sintaks lama untuk IE10.

Codepen untuk bermain dengan: tautan ke codepen

Atau yang ini, bagi mereka yang membutuhkan wadah utama untuk dapat digulir jika konten meluap: tautan ke codepen

14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

Di semua peramban waras, Anda bisa meletakkan div "header" sebelum konten, sebagai saudara kandung, dan CSS yang sama akan berfungsi. Namun, IE7- tidak menginterpretasikan ketinggian dengan benar jika float 100% dalam kasus itu, sehingga header harus dalam konten, seperti di atas. Overflow: otomatis akan menyebabkan bilah gulir ganda pada IE (yang selalu memiliki bilah gulir viewport terlihat, tetapi dinonaktifkan), tetapi tanpa itu, konten akan klip jika meluap.

12
Jerph

Saya bergumul dengan ini untuk sementara waktu dan berakhir dengan yang berikut:

Karena mudah untuk membuat konten DIV sama tinggi dengan induk tetapi tampaknya sulit untuk membuatnya tinggi orangtua dikurangi tinggi header saya memutuskan untuk membuat konten div tinggi penuh tetapi posisikan itu benar-benar di sudut kiri atas dan kemudian tentukan padding untuk bagian atas yang memiliki tinggi header. Dengan cara ini, konten ditampilkan dengan rapi di bawah tajuk dan mengisi seluruh ruang yang tersisa:

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}
10
B_G

Jika Anda bisa berurusan dengan tidak mendukung browser lama (yaitu, MSIE 9 atau lebih lama), Anda dapat melakukan ini dengan Modul Layout Kotak Fleksibel yang sudah W3C CR. Modul itu memungkinkan trik-trik bagus lainnya juga, seperti memesan kembali konten.

Sayangnya, MSIE 9 atau lebih kecil tidak mendukung ini dan Anda harus menggunakan awalan vendor untuk properti CSS untuk setiap browser selain Firefox. Semoga vendor lain segera menjatuhkan awalan.

Pilihan lain adalah Layout Grid CSS tetapi yang memiliki dukungan lebih sedikit dari versi browser yang stabil. Dalam praktiknya, hanya MSIE 10 yang mendukung ini.

10

Ada banyak jawaban sekarang, tetapi saya menemukan menggunakan height: 100vh; untuk bekerja pada elemen div yang perlu mengisi seluruh ruang vertikal yang tersedia.

Dengan cara ini, saya tidak perlu bermain-main dengan tampilan atau posisi. Ini sangat berguna ketika menggunakan Bootstrap untuk membuat dasbor di mana saya memiliki sidebar dan main. Saya ingin utama untuk meregangkan dan mengisi seluruh ruang vertikal sehingga saya bisa menerapkan warna latar belakang.

div {
    height: 100vh;
}

Mendukung IE9 dan lebih tinggi: klik untuk melihat tautan

10
Puiu

Kenapa tidak seperti ini saja?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

Memberi Anda html dan tubuh (dalam urutan itu) tinggi dan kemudian hanya memberi elemen Anda tinggi?

Bekerja untukku

9
Thaoms
 style="height:100vh"

memecahkan masalah untuk saya. Dalam kasus saya, saya menerapkan ini pada div yang diperlukan

7
Zohab Ali

Solusi Grid CSS

Hanya mendefinisikan body dengan display:grid dan grid-template-rows menggunakan auto dan properti nilai fr.

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

Panduan Lengkap untuk Grids @ CSS-Tricks.com

6
Paulie_D

Anda benar-benar dapat menggunakan display: table untuk membagi area menjadi dua elemen (header dan konten), di mana header dapat bervariasi dalam ketinggian dan konten mengisi ruang yang tersisa. Ini berfungsi dengan seluruh halaman, serta ketika area hanyalah isi dari elemen lain yang diposisikan dengan position diatur ke relative, absolute atau fixed. Ini akan berfungsi selama elemen induk memiliki tinggi non-nol.

Lihat biola ini dan juga kode di bawah ini:

CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>
5
Amiramix

Vincent, saya akan menjawab lagi menggunakan persyaratan baru Anda. Karena Anda tidak peduli tentang konten yang disembunyikan jika terlalu lama, Anda tidak perlu mengapung header. Masukkan saja overflow yang disembunyikan pada tag html dan tubuh, dan atur #content menjadi 100%. Konten akan selalu lebih panjang dari viewport pada ketinggian header, tetapi akan disembunyikan dan tidak akan menyebabkan scrollbar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>
5
Jerph

Coba ini

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
4
Arun

Saya menemukan solusi yang cukup sederhana, karena bagi saya itu hanya masalah desain. Saya ingin sisa halaman tidak putih di bawah kaki merah. Jadi saya mengatur warna latar belakang halaman menjadi merah. Dan isi backgroundcolor menjadi putih. Dengan tinggi konten diatur ke mis. 20em atau 50% halaman yang hampir kosong tidak akan membuat seluruh halaman merah.

3
htho

Untuk aplikasi seluler saya hanya menggunakan VH dan VW

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

Demo - https://jsfiddle.net/u763ck92/

3
grinmax

Memutar ide Pak Alien ...

Ini tampaknya solusi yang lebih bersih daripada kotak fleksibel populer untuk browser yang mendukung CSS3.

Cukup gunakan min-height (bukan tinggi) dengan calc () ke blok konten.

Kalk () dimulai dengan 100% dan mengurangi ketinggian header dan footer (perlu menyertakan nilai padding)

Menggunakan "min-height" bukannya "height" sangat berguna sehingga dapat bekerja dengan konten yang diberikan javascript dan kerangka kerja JS seperti Angular2. Jika tidak, perhitungan tidak akan mendorong footer ke bagian bawah halaman setelah konten yang diberikan javascript terlihat.

Berikut adalah contoh sederhana dari header dan footer menggunakan tinggi 50px dan 20px padding untuk keduanya.

Html:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

Css:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

Tentu saja, matematika dapat disederhanakan tetapi Anda mendapatkan ide ...

2
Pat M

Saya memiliki masalah yang sama tetapi saya tidak bisa membuat solusi dengan flexbox di atas. Jadi saya membuat template saya sendiri, yang meliputi:

  • header dengan elemen ukuran tetap
  • sebuah footer
  • bilah samping dengan bilah gulir yang menempati ketinggian yang tersisa
  • konten

Saya menggunakan flexbox tetapi dengan cara yang lebih sederhana, hanya menggunakan properti display: flex dan flex-direction: baris | kolom :

Saya menggunakan sudut dan saya ingin ukuran komponen saya menjadi 100% dari elemen induknya.

Kuncinya adalah mengatur ukuran (dalam persen) untuk semua orang tua yang masuk untuk membatasi ukuran mereka. Dalam contoh berikut, tinggi myapp memiliki 100% viewport.

Komponen utama memiliki 90% dari viewport, karena header dan footer memiliki 5%.

Saya memposting templat saya di sini: https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

Html:

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>
2

Ini dinamis menghitung ruang layar penyempurnaan, lebih baik menggunakan Javascript.

Anda dapat menggunakan teknologi CSS-IN-JS, seperti lib di bawah ini:

https://github.com/cssobj/cssobj

DEMO: https://cssobj.github.io/cssobj-demo/

0
James Yang