Buat div mengisi ketinggian ruang layar yang tersisa

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

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

Saya memiliki header divdan 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%. Menempatkan ke headerdalam contenttidak akan memungkinkan ini berfungsi.

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

Memperbarui:

Elemen-elemen di dalam konten divakan memiliki ketinggian yang diatur ke persentase juga. Jadi sesuatu di 100% di dalamnya divakan mengisinya ke bawah. Seperti halnya dua elemen pada 50%.

Pembaruan 2:

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

Pembaruan 2015: pendekatan flexbox

Ada dua jawaban lain yang menyebutkan flexbox secara singkat ; 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 setiap 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 FlexieJS shim.

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 dengan 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 menandai properti flex-grow , flex-shrink , dan flex-basis untuk menetapkan fleksibilitas item-item flex. Mozilla memiliki pengantar yang bagus untuk model kotak fleksibel .

Sebenarnya tidak ada cara lintas browser yang baik untuk melakukan ini dalam CSS. Dengan asumsi tata letak Anda memiliki kompleksitas, Anda perlu menggunakan JavaScript untuk mengatur ketinggian 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.

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>

Alih-alih menggunakan tabel di markup, Anda bisa menggunakan tabel CSS.

Markup

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(Relevan) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1 dan FIDDLE2

Beberapa kelebihan dari metode ini adalah:

1) Kurang markup

2) Markup lebih semantik daripada tabel, karena ini bukan data tabular.

3) Dukungan browser sangat baik : IE8 +, Semua browser modern dan perangkat seluler ( caniuse )

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

Pendekatan CSS saja (Jika tinggi diketahui / diperbaiki)

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

Dengan asumsi kami memiliki ketinggian header dan footerelemen tetap dan kami ingin sectiontag untuk mengambil seluruh ketinggian vertikal yang tersedia ...

Demo

Diasumsikan markup dan CSS Anda seharusnya

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

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

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

Pastikan Anda menggunakan height: 100%;elemen induk.

Bekas: 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>

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

Bagaimana Anda hanya menggunakan vhsingkatan view heightdi CSS ...

Lihatlah cuplikan kode yang saya buat untuk Anda di bawah 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:

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.

Itu bisa dilakukan murni dengan CSSmenggunakan 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>

Aku memeriksa itu, Ia bekerja di semua browser utama: Chrome, IE, danFireFox

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

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

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

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

Pratinjau langsung JSFiddle

Saya telah mencari jawaban untuk ini juga. Jika Anda cukup beruntung untuk dapat menargetkan IE8 dan yang lebih tinggi, Anda bisa menggunakan display:tabledan 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!

Apa yang berhasil untuk saya (dengan div dalam div lain dan saya berasumsi dalam semua keadaan lain) adalah mengatur padding bawah menjadi 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 aturan css sangat sedikit.

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: tautan ke codepen

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

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

<!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 browser waras, Anda dapat 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 viewport scrollbar terlihat, tetapi dinonaktifkan), tetapi tanpa itu, konten akan klip jika meluap.

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

Karena mudah untuk membuat konten DIV sama tinggi dengan orang tua tetapi tampaknya sulit untuk membuatnya menjadi 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%;
}

Jika Anda bisa berurusan dengan tidak mendukung browser lama (yaitu, MSIE 9 atau lebih tua), Anda dapat melakukan ini dengan Modul Layout Kotak Fleksibel yang sudah menjadi 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 itu bahkan memiliki dukungan lebih sedikit dari versi browser yang stabil. Dalam praktiknya, hanya MSIE 10 yang mendukung ini.

Pembaruan tahun 2020 : Semua browser modern mendukung keduanya display: flexdan display: grid. Satu-satunya yang hilang adalah dukungan subgridyang hanya didukung oleh Firefox. Perhatikan bahwa MSIE tidak mendukung baik oleh spesifikasi tetapi jika Anda ingin menambahkan peretasan CSS spesifik MSIE, itu dapat dibuat untuk berperilaku. Saya sarankan mengabaikan MSIE saja karena bahkan Microsoft mengatakan itu tidak boleh digunakan lagi.

Solusi Grid CSS

Hanya mendefinisikan properti bodywith display:gridand grid-template-rowsusing autodan frvalue.

* {
  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

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 memberikan elemen Anda tinggi?

Bekerja untukku

Anda sebenarnya dapat menggunakan display: tableuntuk membagi area menjadi dua elemen (tajuk dan konten), di mana tajuk dapat bervariasi dalam ketinggian dan konten mengisi ruang yang tersisa. Ini berfungsi dengan seluruh halaman, serta ketika area hanyalah konten dari elemen lain yang diposisikan dengan positionset ke relative, absoluteatau 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>

 style="height:100vh"

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

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 #contenttinggi hingga 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>

Coba ini

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

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.

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
• kandungan

Saya menggunakan flexbox tetapi dengan cara yang lebih sederhana, hanya menggunakan properti display: flex dan direction-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>

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/

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" bukan "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 bantalan 20px 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 idenya ...

Di Bootstrap:

Gaya CSS:

html, body {
    height: 100%;
}

1) Cukup isi ketinggian ruang layar yang tersisa:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1>

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

2) mengisi ketinggian ruang layar yang tersisa dan menyelaraskan konten ke tengah elemen induk:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

Ini adalah versi minimal saya sendiri dari solusi Pebbl. Butuh selamanya untuk menemukan trik agar bisa berfungsi di IE11. (Juga diuji di Chrome, Firefox, Edge, dan Safari.)

<!DOCTYPE html>
<html>
<head>
<style>
html {
    height: 100%;
    }
body {
    height: 100%;
    margin: 0;
    }
section {
    display: flex;
    flex-direction: column;
    height: 100%;
    }
div:first-child {
    background: gold;
    }
div:last-child {
    background: plum;
    flex-grow: 1;
    }
</style>
</head>
<body>
    <section>
      <div>FIT</div>
      <div>GROW</div>
    </section>
</body>
</html>