Zrób div wypełni wysokość pozostałego miejsca na ekranie

Pracuję nad aplikacją internetową, w której chcę, aby zawartość wypełniała wysokość całego ekranu.

Strona ma nagłówek, który zawiera logo i informacje o koncie. Może to być dowolna wysokość. Chcę, aby div treści wypełnił resztę strony na dole.

Mam nagłówek divi treść div. W tej chwili używam tabeli do takiego układu:

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

Pełna wysokość strony jest wypełniona i nie jest wymagane przewijanie.

Dla czegokolwiek w div treści, ustawienie top: 0;umieści go bezpośrednio pod nagłówkiem. Czasami zawartość będzie prawdziwym stołem, którego wysokość będzie ustawiona na 100%. Włożenie do headerśrodka contentnie pozwoli na to.

Czy istnieje sposób na osiągnięcie tego samego efektu bez użycia table?

Aktualizacja:

Elementy wewnątrz zawartości divbędą miały również ustawione wartości procentowe. Więc coś w 100% w środku divwypełni go do dołu. Podobnie jak dwa elementy na 50%.

Aktualizacja 2:

Na przykład, jeśli nagłówek zajmuje 20% wysokości ekranu, tabela określona na 50% wewnątrz #contentzajmuje 40% powierzchni ekranu. Do tej pory zawijanie całej rzeczy w stół jest jedyną rzeczą, która działa.

Aktualizacja 2015: podejście flexbox

Istnieją dwie inne odpowiedzi krótko wspominające o flexboksie ; było to jednak ponad dwa lata temu i nie podają żadnych przykładów. Specyfikacja Flexboksu zdecydowanie się teraz ustabilizowała.

Uwaga: Chociaż specyfikacja CSS Flexible Boxes Layout znajduje się na etapie rekomendacji dla kandydatów, nie wszystkie przeglądarki go zaimplementowały. Implementacja WebKit musi być poprzedzona -webkit-; Internet Explorer implementuje starą wersję specyfikacji, z prefiksem -ms-; Opera 12.10 implementuje najnowszą wersję specyfikacji, bez prefiksu. Aby uzyskać aktualny stan zgodności, zobacz tabelę zgodności dla każdej właściwości.

(pochodzi z https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Fiętki_boksów )

Wszystkie główne przeglądarki i IE11 + obsługują Flexbox. W przeglądarce IE 10 lub starszej można użyć podkładki FlexieJS.

Aby sprawdzić bieżące wsparcie, możesz także zobaczyć tutaj: http://caniuse.com/#feat=flexbox

Przykład roboczy

Dzięki Flexbox możesz łatwo przełączać się między dowolnymi wierszami lub kolumnami o stałych wymiarach, wymiarach wielkości treści lub wymiarach pozostałej przestrzeni. W moim przykładzie ustawiłem przyciąganie nagłówka do jego zawartości (zgodnie z pytaniem PO), dodałem stopkę, aby pokazać, jak dodać region o stałej wysokości, a następnie ustawić obszar zawartości, aby wypełnić pozostałą przestrzeń.

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>

W powyższym CSS właściwość flex skraca właściwości flex-grow , flex-shrink i flex- base, aby ustalić elastyczność elementów flex. Mozilla ma dobre wprowadzenie do modelu elastycznych pudełek .

Naprawdę nie ma solidnego sposobu na przeglądarkę w CSS. Zakładając, że twój układ ma złożoność, musisz użyć JavaScript, aby ustawić wysokość elementu. Istotą tego, co musisz zrobić, jest:

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

Po uzyskaniu tej wartości i ustawieniu wysokości elementu należy dołączyć procedury obsługi zdarzeń do okna zarówno onload, jak i onresize, aby można było uruchomić funkcję zmiany rozmiaru.

Ponadto, zakładając, że treść może być większa niż obszar wyświetlania, musisz ustawić przepełnienie-y, aby przewijać.

Oryginalny post został sprzed ponad 3 lat. Wydaje mi się, że wiele osób, które przychodzą do tego postu, jak ja, szuka rozwiązania w stylu aplikacji, powiedzmy, że naprawiono nagłówek, stopkę i treść o pełnej wysokości zajmującą resztę ekranu. Jeśli tak, ten post może pomóc, działa na IE7 + itp.

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

A oto kilka fragmentów tego postu:

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

Zamiast używać tabel w znacznikach, możesz użyć tabel CSS.

Narzut

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

(Odpowiedni) CSS

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

FIDDLE1 i FIDDLE2

Niektóre zalety tej metody to:

1) Mniej znaczników

2) Znaczniki są bardziej semantyczne niż tabele, ponieważ nie są to dane tabelaryczne.

3) Obsługa przeglądarek jest bardzo dobra : IE8 +, Wszystkie nowoczesne przeglądarki i urządzenia mobilne ( 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 } 

Podejście tylko CSS (jeśli wysokość jest znana / ustalona)

Jeśli chcesz, aby środkowy element rozciągał się na całej stronie w pionie, możesz użyć tego, calc()co zostało wprowadzone w CSS3.

Zakładając, że mamy stałą wysokość header i footerelementy i chcemy, aby sectionznacznik zajmował całą dostępną wysokość w pionie ...

Próbny

Zakładany znacznik i twój CSS powinny być

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>

Więc tutaj robię, sumując wysokość elementów i odejmując od 100%używania calc()funkcji.

Tylko upewnij się, że używasz height: 100%;elementów nadrzędnych.

Używany: 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>

Proste rozwiązanie z wykorzystaniem Flexbox:

html,
body {
  height: 100%;
}

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

.content {
  flex-grow: 1;
}

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

Próbka Codepen

Alternatywne rozwiązanie z div wyśrodkowanym w div treści

A może po prostu użyjesz tego, vhco oznacza view heightw CSS ...

Spójrz na fragment kodu, który dla ciebie utworzyłem, i uruchom go:

body {
  padding: 0;
  margin: 0;
}

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

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

Zobacz także zdjęcie, które dla ciebie stworzyłem:

CSS3 Prosty sposób

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

wszystkie główne przeglądarki obecnie go obsługują, więc śmiało, jeśli nie musisz obsługiwać starych przeglądarek.

Można to zrobić wyłącznie za CSSpomocą 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;
}

i HTML

<div id="page">

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

</div>

Sprawdziłem to, to działa na wszystkich głównych przeglądarek: Chrome, IE, iFireFox

Żadne z opublikowanych rozwiązań nie działa, gdy potrzebny jest dolny div do przewijania, gdy zawartość jest zbyt wysoka. Oto rozwiązanie, które działa w takim przypadku:

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

Oryginalne źródło: Napełnianie pozostałej wysokości pojemnika podczas obsługi przelewu w CSS

Podgląd na żywo JSFiddle

Ja również szukałem odpowiedzi na to pytanie. Jeśli masz szczęście, że możesz celować w IE8 i nowsze wersje, możesz użyć display:tablepowiązanych wartości, aby uzyskać reguły renderowania tabel z elementami na poziomie bloku, w tym div.

Jeśli masz więcej szczęścia, a użytkownicy korzystają z przeglądarek najwyższego poziomu (na przykład, jeśli jest to aplikacja intranetowa na komputerach, którymi kontrolujesz, tak jak w moim najnowszym projekcie), możesz użyć nowego układu elastycznego pudełka w CSS3!

To, co zadziałało dla mnie (z divem w innym divie i zakładam, że we wszystkich innych okolicznościach) to ustawienie dolnego wypełnienia na 100%. To znaczy, dodaj to do swojego css / stylesheet:

padding-bottom: 100%;

Zastrzeżenie: Przyjęta odpowiedź daje pomysł na rozwiązanie, ale uważam, że jest nieco rozdęty niepotrzebnymi regułami otoki i css. Poniżej znajduje się rozwiązanie z bardzo małą liczbą reguł 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 */
}

Powyższe rozwiązanie wykorzystuje jednostki rzutni i Flexbox , a zatem jest IE10 +, pod warunkiem, że używasz starej składni dla IE10.

Codepen do zabawy: link do codepen

Lub ten, dla tych, którzy potrzebują przewijania głównego kontenera w przypadku przepełnienia zawartości: link do codepen

Jest teraz mnóstwo odpowiedzi, ale znalazłem zastosowanie height: 100vh;do pracy z elementem div, który musi wypełnić całą dostępną przestrzeń pionową.

W ten sposób nie muszę bawić się wyświetlaniem ani pozycjonowaniem. Przydało się to przy użyciu Bootstrap do stworzenia deski rozdzielczej, w której miałem pasek boczny i główny. Chciałem, aby główna rozciągnęła się i wypełniła całą pionową przestrzeń, aby móc zastosować kolor tła.

div {
    height: 100vh;
}

Obsługuje IE9 i nowsze: kliknij, aby zobaczyć łącze

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

We wszystkich rozsądnych przeglądarkach możesz umieścić div „nagłówka” przed treścią, jako rodzeństwo, i ten sam CSS będzie działał. Jednak IE7- nie interpretuje poprawnie wysokości, jeśli liczba zmiennoprzecinkowa wynosi w tym przypadku 100%, więc nagłówek musi być w treści, jak wyżej. Przepełnienie: auto spowoduje podwójne paski przewijania w IE (który zawsze ma widoczny pasek przewijania widocznego, ale wyłączony), ale bez niego zawartość zostanie przycięta, jeśli się przepełni.

Jeśli możesz sobie poradzić z brakiem obsługi starych przeglądarek (tj. MSIE 9 lub starszych), możesz to zrobić za pomocą modułu elastycznego układu pól, który jest już W3C CR. Ten moduł pozwala również na inne fajne sztuczki, takie jak zmiana kolejności treści.

Niestety, MSIE 9 lub nowsze nie obsługują tego i musisz użyć prefiksu dostawcy dla właściwości CSS dla każdej przeglądarki innej niż Firefox. Mamy nadzieję, że wkrótce inni dostawcy również upuszczą prefiks.

Innym wyborem byłby układ siatki CSS, ale ma jeszcze mniejszą obsługę ze stabilnych wersji przeglądarek. W praktyce tylko MSIE 10 to obsługuje.

Zmagałem się z tym przez chwilę i skończyłem z następującymi:

Ponieważ łatwo jest ustawić zawartość DIV na tej samej wysokości co element nadrzędny, ale najwyraźniej trudno jest nadać jej wysokość nadrzędną minus wysokość nagłówka, postanowiłem ustawić zawartość div na pełną wysokość, ale umieść ją absolutnie w lewym górnym rogu, a następnie zdefiniuj wypełnienie na górze, która ma wysokość nagłówka. W ten sposób zawartość wyświetla się starannie pod nagłówkiem i wypełnia całą pozostałą przestrzeń:

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

Rozwiązanie CSS Grid

Wystarczy zdefiniować właściwość bodywith display:gridi grid-template-rowsusing autoi 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>

Kompletny przewodnik po Grids @ CSS-Tricks.com

Dlaczego nie tak po prostu?

html, body {
    height: 100%;
}

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

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

Dajesz html i ciało (w tej kolejności) wysokość, a następnie po prostu nadajesz swoim elementom wysokość?

Pracuje dla mnie

W rzeczywistości można użyć display: tabledo podzielenia obszaru na dwa elementy (nagłówek i treść), w których wysokość nagłówka może się różnić, a zawartość wypełnia pozostałą przestrzeń. Działa to z całą stroną, a także wtedy, gdy obszar jest po prostu zawartością innego elementu ustawionego z positionustawionym na relative, absolutelub fixed. Będzie działał, dopóki element nadrzędny ma niezerową wysokość.

Zobacz to skrzypce, a także poniższy kod:

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"

rozwiązał problem dla mnie. W moim przypadku zastosowałem to do wymaganego div

Vincent, odpowiem ponownie, używając twoich nowych wymagań. Ponieważ nie zależy Ci na tym, aby treść była ukryta, jeśli jest zbyt długa, nie musisz unosić nagłówka. Po prostu umieść przelew ukryty w tagach HTML i body i ustaw #contentwysokość na 100%. Zawartość zawsze będzie dłuższa niż obszar wyświetlania o wysokość nagłówka, ale będzie ukryta i nie spowoduje wyświetlania pasków przewijania.

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

Spróbuj tego

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

Znalazłem dość proste rozwiązanie, ponieważ dla mnie było to tylko zagadnienie projektowe. Chciałem, żeby reszta strony nie była biała poniżej czerwonej stopki. Więc ustawiłem kolor tła stron na czerwony. A zawartość tła ma kolor biały. Przy wysokości zawartości ustawionej na np. 20em lub 50% prawie pusta strona nie pozostawi całej strony czerwonej.

Miałem ten sam problem, ale nie mogłem rozwiązać problemu z powyższymi Flexboxami. Stworzyłem więc własny szablon, który obejmuje:

• nagłówek z elementem o stałym rozmiarze
• stopka
• pasek boczny z paskiem przewijania zajmującym pozostałą wysokość
• zadowolony

Użyłem Flexboksów, ale w prostszy sposób, używając tylko właściwości display: flex i flex-direction: row | column :

Używam kątowej i chcę, aby rozmiary moich komponentów były równe 100% ich elementu macierzystego.

Kluczem jest ustawienie wielkości (w procentach) dla wszystkich rodziców w celu ograniczenia ich wielkości. W poniższym przykładzie wysokość myapp ma 100% rzutni.

Główny składnik ma 90% rzutni, ponieważ nagłówek i stopka mają 5%.

Mój szablon opublikowałem tutaj: 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>

Do aplikacji mobilnej używam tylko VH i 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/

Oddając pomysł pana Alien ...

Wydaje się, że jest to czystsze rozwiązanie niż popularny flex box dla przeglądarek obsługujących CSS3.

Wystarczy użyć minimalnej wysokości (zamiast wysokości) za pomocą funkcji calc () do bloku zawartości.

Calc () zaczyna się od 100% i odejmuje wysokości nagłówków i stopek (należy dołączyć wartości wypełnienia)

Używanie „minimalnej wysokości” zamiast „wysokości” jest szczególnie przydatne, ponieważ może pracować z zawartością renderowaną w javascript i strukturami JS, takimi jak Angular2. W przeciwnym razie obliczenia nie przesuną stopki na dół strony, gdy treść renderowana w javascript będzie widoczna.

Oto prosty przykład nagłówka i stopki wykorzystujących wysokość 50 pikseli i wypełnienie 20 pikseli w obu przypadkach.

HTML:

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

Css:

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

Oczywiście matematykę można uprościć, ale masz pomysł ...

W Bootstrap:

Style CSS:

html, body {
    height: 100%;
}

1) Wystarczy wypełnić wysokość pozostałego miejsca na ekranie:

<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) wypełnij wysokość pozostałego miejsca na ekranie i wyrównaj zawartość do środka elementu nadrzędnego:

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

To moja własna minimalna wersja rozwiązania Pebbl. To trwało wiecznie, aby znaleźć sposób na uruchomienie go w IE11. (Przetestowano również w Chrome, Firefox, Edge i 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>