Kalan ekran boşluğunun yüksekliğini bir div yapmak

İçeriğin tüm ekranın yüksekliğini doldurmasını istediğim bir web uygulaması üzerinde çalışıyorum.

Sayfada bir logo ve hesap bilgileri içeren bir başlık vardır. Bu keyfi bir yükseklik olabilir. İçerik div'in sayfanın geri kalanını en alta doldurmasını istiyorum.

Bir başlığım divve bir içeriğim var div. Şu anda böyle bir düzen için bir tablo kullanıyorum:

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

Sayfanın tüm yüksekliği doldurulur ve kaydırma gerekmez.

İçerik div içindeki herhangi bir şey için, ayar top: 0;başlığı doğrudan başlığın altına koyacaktır. Bazen içerik% 100'e ayarlanmış olarak gerçek bir tablo olur. headerİçeri koymak content, bunun çalışmasına izin vermeyecektir.

Aynı etkiyi kullanmadan elde etmenin bir yolu var mı table?

Güncelleme:

İçeriğin içindeki divöğelerin de yükseklikleri yüzde olarak ayarlanmış olacaktır. Yani içinde% 100 bir şey divdibe doldurur. % 50'de iki element gibi.

Güncelleme 2:

Örneğin, başlık ekran yüksekliğinin% 20'sini kaplarsa,% 50 içinde belirtilen bir tablo #contentekran alanının% 40'ını kaplar. Şimdiye kadar, her şeyi bir tabloya sarmak işe yarayan tek şeydir.

2015 güncellemesi: flexbox yaklaşımı

Flexbox'tan kısaca bahseden iki cevap daha var ; ancak bu iki yıldan uzun bir süre önceydi ve herhangi bir örnek vermiyorlar. Flexbox için şartname şimdi kesin olarak yerleşmiştir.

Not: CSS Esnek Kutular Düzeni spesifikasyonu Aday Öneri aşamasında olsa da, tüm tarayıcılar bunu uygulamamıştır. WebKit uygulamasının önüne -webkit-; Internet Explorer, -ms- ile başlayan eski spec sürümünü uygular; Opera 12.10, önceden tanımlanmamış spesifikasyonun en son sürümünü uygular. Güncel bir uyumluluk durumu için her özellikteki uyumluluk tablosuna bakın.

( https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/F Flexible_boxes adresinden alınmıştır )

Tüm büyük tarayıcılar ve IE11 +, Flexbox'ı destekler. IE 10 veya daha eski sürümler için FlexieJS altlığını kullanabilirsiniz.

Mevcut desteği kontrol etmek için burada da görebilirsiniz: http://caniuse.com/#feat=flexbox

Çalışma örneği

Flexbox ile sabit boyutları, içerik boyutu boyutları veya kalan boşluk boyutları olan satır veya sütunlarınız arasında kolayca geçiş yapabilirsiniz. Örneğimde, üstbilgiyi içeriğine yapışacak şekilde ayarladım (OP sorusuna göre), sabit yükseklikte bir bölgenin nasıl ekleneceğini göstermek için bir altbilgi ekledim ve sonra kalan alanı doldurmak için içerik alanını ayarladım.

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>

Yukarıdaki CSS'de, flex özelliği , flex öğelerinin esnekliğini sağlamak için flex -grow , flex-shrink ve flex-base özelliklerini kısaltır. Mozilla, esnek kutular modeline iyi bir giriş sağlar .

CSS'de bunu yapmanın gerçekten sağlam, tarayıcılar arası bir yolu yok. Düzeninizin karmaşıklıkları olduğunu varsayarsak, öğenin yüksekliğini ayarlamak için JavaScript kullanmanız gerekir. Yapmanız gerekenin özü:

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

Bu değeri elde edip öğenin yüksekliğini ayarladıktan sonra, yeniden boyutlandırma işlevinizi çalıştırabilmeniz için hem pencere yüküne hem de yeniden boyutlandırmaya olay işleyicileri eklemeniz gerekir.

Ayrıca, içeriğinizin görünüm penceresinden daha büyük olabileceğini varsayarsak, kaydırmak için taşma-y ayarlamanız gerekir.

Orijinal yayın 3 yıldan fazla bir süre önce. Benim gibi bu gönderiye gelen birçok kişi sanırım bir uygulama benzeri düzen çözümü arıyor, bir şekilde sabit bir başlık, altbilgi ve tam yükseklikte içerik dinlenme ekranını alıyor. Eğer öyleyse, bu yazı yardımcı olabilir, IE7 +, vb.

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

Ve işte bu yayından bazı snippet'ler:

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

İşaretlemede tablolar kullanmak yerine CSS tablolarını kullanabilirsiniz.

Biçimlendirme

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

(İlgili) CSS

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

FIDDLE1 ve FIDDLE2

Bu yöntemin bazı avantajları:

1) Daha az biçimlendirme

2) İşaretleme tablolardan daha anlamlıdır, çünkü bu tablo şeklinde veriler değildir.

3) Tarayıcı desteği çok iyi : IE8 +, Tüm modern tarayıcılar ve mobil cihazlar ( 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 } 

Yalnızca CSS Yaklaşımı (Yükseklik biliniyorsa / sabitse)

Orta öğenin tüm sayfaya dikey olarak yayılmasını istediğinizde, calc()CSS3'te tanıtılan öğeyi kullanabilirsiniz .

Sabit bir yüksekliğe header ve footerelemanlara sahip olduğumuzu ve sectionetiketin kullanılabilir tüm dikey yüksekliği almasını istediğimizi varsayarsak ...

gösteri

Varsayılan biçimlendirme ve CSS'niz

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>

Yani burada yaptığım şey, elemanların yüksekliğini artırmak ve işlevi 100%kullanmaktan calc()düşmektir.

height: 100%;Üst öğeler için kullandığınızdan emin olun .

Kullanılmış: height: calc(100vh - 110px);

kod:

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

Flexbox kullanarak basit bir çözüm:

html,
body {
  height: 100%;
}

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

.content {
  flex-grow: 1;
}

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

Codepen örneği

İçerik div içinde bir div bulunan alternatif bir çözüm

Nasıl sadece kullanım hakkında vhaçılımı view heightiçinde CSS ...

Bak kodu pasajı aşağıda sizin için oluşturulan ve çalıştırın:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

<div class="full-height">
</div>

Ayrıca, sizin için oluşturduğum aşağıdaki resme bakın:

CSS3 Basit Yolu

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

Bugünlerde tüm büyük tarayıcılar bunu destekliyor, bu nedenle eski tarayıcıları destekleme gereksiniminiz yoksa devam edin.

Bu tarafından tamamen yapılabilir CSSkullanarak 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;
}

ve HTML

<div id="page">

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

</div>

Ben Tüm temel tarayıcılarda çalışır, onu kontrol: Chrome, IE, veFireFox

Gönderilen çözümlerin hiçbiri, içerik çok uzun olduğunda kaydırmak için alt div'a ihtiyacınız olduğunda işe yaramaz. İşte bu durumda çalışan bir çözüm:

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

Orijinal kaynak: CSS'de Taşmayı İşlerken Bir Kabın Kalan Yüksekliğini Doldurma

JSFiddle canlı önizleme

Bunun için de bir cevap arıyordum. IE8 ve üstü hedefleyebilecek kadar şanslıysanız, display:tablediv dahil olmak üzere blok düzeyinde öğeler içeren tabloların oluşturma kurallarını almak için ve ilgili değerleri kullanabilirsiniz .

Hatta daha şanslıysanız ve kullanıcılarınız en üst düzey tarayıcıları kullanıyorsa (örneğin, en son projem gibi kontrol ettiğiniz bilgisayarlarda bir intranet uygulamasıysa), CSS3'te yeni Esnek Kutu Düzeni'ni kullanabilirsiniz !

Benim için işe yarayan şey (başka bir div içinde bir div ile ve diğer tüm durumlarda varsayalım) alt dolguyu% 100'e ayarlamaktır. Yani, bunu css / stylesheet'inize ekleyin:

padding-bottom: 100%;

Feragatname: Kabul edilen cevap çözüm fikrini verir, ancak gereksiz bir paketleyici ve css kuralları ile biraz şişirilmiş buluyorum. Aşağıda çok az css kuralına sahip bir çözüm var.

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 */
}

Yukarıdaki çözümde görüntü birimi ve flexbox kullanılıyor ve bu nedenle IE10 için eski sözdizimini kullanmanızı sağlayan IE10 + 'dır.

Oynamak için kodpen: codepen link

Veya bu, taşan içerik durumunda ana kabın kaydırılabilir olması için: codepen'e bağlantı

Şimdi bir ton cevap var, ama height: 100vh;mevcut tüm dikey alanı doldurması gereken div öğesi üzerinde çalışmak için kullandım .

Bu şekilde, ekran veya konumlandırma ile oynamam gerekmiyor. Bu, bir kenar çubuğu ve bir ana ekranım olan bir gösterge tablosu yapmak için Bootstrap kullanırken kullanışlı oldu. Arka plan rengini uygulayabilmek için ana bölümün tüm dikey alanı germesini ve doldurmasını istedim.

div {
    height: 100vh;
}

IE9 ve üstünü destekler: bağlantıyı görmek için tıklayın

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

Tüm aklı başında tarayıcılarda, "header" div değerini bir kardeş olarak içeriğin önüne koyabilirsiniz ve aynı CSS çalışacaktır. Bununla birlikte, IE7- şamandıra bu durumda% 100 ise yüksekliği doğru yorumlamaz, bu nedenle üstbilginin yukarıdaki gibi içerikte olması gerekir. Taşma: otomatik, IE'de (her zaman görünüm alanı kaydırma çubuğunu görünür, ancak devre dışı olan) çift kaydırma çubuklarına neden olur, ancak onsuz içerik taşarsa kırpılır.

Bir süre bununla boğuştum ve aşağıdakilerle sonuçlandım:

İçerik DIV'yi üst öğe ile aynı yükseklikte yapmak kolay olduğu, ancak üst yüksekliği eksi başlık yüksekliğinden çıkarmak zor olduğu için içeriği div tam yüksekliğinde yapmaya karar verdim ancak kesinlikle sol üst köşeye yerleştirip bir dolgu tanımladım başlık yüksekliğine sahip olan üst kısım için. Bu şekilde içerik, başlığın altında düzgün bir şekilde görüntülenir ve kalan tüm alanı doldurur:

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

Eski tarayıcıları (MSIE 9 veya daha eski) desteklememekle başa çıkabiliyorsanız, bunu zaten W3C CR olan Esnek Kutu Yerleşimi Modülü ile yapabilirsiniz . Bu modül, içeriği yeniden sıralama gibi diğer güzel numaralara da izin verir.

Ne yazık ki, MSIE 9 veya daha azı bunu desteklemez ve Firefox dışındaki her tarayıcı için CSS özelliği için satıcı öneki kullanmanız gerekir. Umarım diğer satıcılar da öneki yakında bırakır.

Başka bir seçenek, CSS Izgara Düzeni olacaktır, ancak tarayıcıların kararlı sürümlerinden daha az desteği vardır. Uygulamada, sadece MSIE 10 bunu desteklemektedir.

Güncelleme yılı 2020 : Tüm modern tarayıcılar display: flexve display: grid. Tek eksik, subgridyalnızca Firefox tarafından desteklenen destek. MSIE'nin spesifikasyon tarafından desteklenmediğini, ancak MSIE'ye özgü CSS saldırılarını eklemeye hazırsanız, davranması sağlanabilir. Microsoft'un bile artık kullanılmaması gerektiğini söylediği için MSIE'yi görmezden gelmenizi öneririm.

CSS Izgara Çözümü

Sadece bodywith display:gridve grid-template-rowsusing autove frvalue özelliğini tanımlamak .

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

Izgaralar için Komple Kılavuz @ CSS-Tricks.com

Neden böyle değil?

html, body {
    height: 100%;
}

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

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

Html ve vücut (bu sırayla) bir yükseklik vermek ve sonra sadece öğeleri bir yükseklik vermek?

Benim için çalışıyor

Aslında display: table, alanı yüksekliğe göre değişebilen ve içeriğin kalan alanı dolduracağı iki öğeye (başlık ve içerik) bölmek için kullanabilirsiniz . Bu, tüm sayfanın yanı sıra alan , veya olarak positionayarlanmış olarak konumlandırılmış başka bir öğenin içeriği relativeolduğunda absoluteda çalışır fixed. Üst öğe sıfırdan farklı bir yüksekliğe sahip olduğu sürece çalışır.

Bu keman ve ayrıca aşağıdaki koda bakın:

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"

sorunu benim için çözdü. Benim durumumda bunu gerekli div'e uyguladım

Vincent, yeni gereksinimlerinizi kullanarak tekrar cevap vereceğim. İçeriğin çok uzunsa gizlenmesini umursadığınız için, üstbilgiyi kaydırmanıza gerek yoktur. Html ve gövde etiketlerine gizli taşma koyun ve #contentyüksekliği% 100 olarak ayarlayın . İçerik her zaman üstbilginin yüksekliğine göre görünüm penceresinden daha uzun olur, ancak gizlenir ve kaydırma çubuklarına neden olmaz.

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

Bunu dene

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

Oldukça basit bir çözüm buldum, çünkü benim için sadece bir tasarım sorunuydu. Sayfanın geri kalanının kırmızı altbilginin altında beyaz olmamasını istedim. Bu yüzden sayfaların arka plan rengini kırmızıya ayarlıyorum. Ve içindekiler arka plan rengi beyaza. İçerik yüksekliği örn. 20em veya% 50 neredeyse boş bir sayfa tüm sayfayı kırmızı bırakmaz.

Aynı problemi yaşadım ama yukarıdaki flexbox'larla çözüm çalıştıramadım. Bu yüzden kendi şablonumu oluşturdum.

• sabit boyutlu eleman içeren bir başlık
• bir altbilgi
• kalan yüksekliği kaplayan kaydırma çubuğuna sahip bir yan çubuk
• içerik

Flexbox'ları kullandım, ancak daha basit bir şekilde, yalnızca display display'i kullanın: flex ve flex-direction: row | column :

Açısal kullanıyorum ve bileşen boyutlarının ana öğelerinin% 100'ü olmasını istiyorum.

Anahtar, boyutlarını sınırlamak için tüm ebeveynler için boyutu (yüzde olarak) ayarlamaktır. Aşağıdaki örnekte myapp yüksekliği görünümün% 100'üne sahiptir.

Ana bileşen görünümün% 90'ına sahiptir, çünkü üstbilgi ve altbilgi% 5'tir.

Şablonumu buraya gönderdim: 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>

Mobil uygulama için sadece VH ve VW kullanıyorum

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

Bay Alien fikrini geri çevirmek ...

Bu, CSS3 özellikli tarayıcılar için popüler esnek kutudan daha temiz bir çözüm gibi görünüyor.

İçerik bloğuna calc () ile minimum yüksekliği (yükseklik yerine) kullanmanız yeterlidir.

Calc ()% 100 ile başlar ve üstbilgi ve altbilgi yüksekliklerini çıkarır (dolgu değerlerini içermelidir)

"Height" yerine "min-height" kullanılması, javascript ile oluşturulan içerik ve Angular2 gibi JS çerçeveleriyle çalışabilmesi için özellikle kullanışlıdır. Aksi takdirde, javascript oluşturulan içerik görünür olduğunda hesaplama altbilgiyi sayfanın altına doğru itmez.

Her ikisi için 50 piksel yükseklik ve 20 piksel dolgu kullanan üstbilgi ve altbilgi için basit bir örnek.

Html:

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

css:

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

Tabii ki, matematik basitleştirilebilir, ancak fikri anlarsınız ...

Bootstrap'ta:

CSS Stilleri:

html, body {
    height: 100%;
}

1) Kalan ekran alanının yüksekliğini doldurun:

<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) kalan ekran alanının yüksekliğini doldurun ve içeriği üst öğenin ortasına hizalayın:

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

Bu benim kendi Pebbl çözümünün minimal versiyonudur. IE11'de çalışmak için hile bulmak sonsuza dek sürdü. (Ayrıca Chrome, Firefox, Edge ve Safari'de de test edilmiştir.)

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