html - Maak een div de hoogte van de resterende schermruimte

Ik werk aan een webtoepassing waarvan ik wil dat de inhoud de hoogte van het volledige scherm vult.

De pagina heeft een koptekst, die een logo bevat, en accountgegevens. Dit kan een willekeurige hoogte zijn. Ik wil dat de inhoudsdiv de rest van de pagina naar beneden vult.

Ik heb een header diven een content div. Op dit moment gebruik ik een tabel voor de lay-out als volgt:

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

Antwoord 1, autoriteit 100%

2015 update: de flexbox-aanpak

Er zijn twee andere antwoorden waarin kort wordt verwezen naar flexbox; dat was echter meer dan twee jaar geleden en ze geven geen voorbeelden. De specificatie voor flexbox is nu definitief geregeld.

Opmerking: hoewel de CSS Flexible Boxes Layout-specificatie zich in de fase van de kandidaat-aanbeveling bevindt, hebben niet alle browsers deze geïmplementeerd. WebKit-implementatie moet worden voorafgegaan door -webkit-; Internet Explorer implementeert een oude versie van de specificatie, voorafgegaan door -ms-; Opera 12.10 implementeert de nieuwste versie van de specificatie, zonder prefix. Bekijk de compatibiliteitstabel op elke eigenschap voor een up-to-date compatibiliteitsstatus.

(overgenomen van https://developer.mozilla.org /nl-NL/docs/Web/Guide/CSS/Flexible_boxes)

Alle belangrijke browsers en IE11+ ondersteunen Flexbox. Voor IE 10 of ouder kunt u de FlexieJS-shim gebruiken.

Als u de huidige ondersteuning wilt controleren, kunt u hier ook kijken:
http://caniuse.com/#feat=flexbox

Werkvoorbeeld

Met flexbox kunt u eenvoudig schakelen tussen al uw rijen of kolommen met vaste afmetingen, afmetingen ter grootte van inhoud of afmetingen voor resterende ruimte. In mijn voorbeeld heb ik de koptekst zo ingesteld dat deze naar de inhoud klikt (volgens de OPs-vraag), ik heb een voettekst toegevoegd om te laten zien hoe een gebied met een vaste hoogte kan worden toegevoegd en stel vervolgens het inhoudsgebied in om de resterende ruimte op te vullen.

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>

Antwoord 2, autoriteit 18%

Er is niet echt een goede, cross-browser manier om dit in CSS te doen. Ervan uitgaande dat uw lay-out ingewikkeld is, moet u JavaScript gebruiken om de hoogte van het element in te stellen. De essentie van wat u moet doen is:

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

Zodra je deze waarde kunt krijgen en de hoogte van het element kunt instellen, moet je gebeurtenishandlers aan zowel het venster onload als onresize koppelen, zodat je je resize-functie kunt activeren.

Als je ervan uitgaat dat je inhoud groter kan zijn dan de viewport, moet je overflow-y instellen om te scrollen.

Antwoord 3, autoriteit 13%

Het oorspronkelijke bericht is meer dan 3 jaar geleden. Ik denk dat veel mensen die naar dit bericht komen, zoals ik, op zoek zijn naar een app-achtige lay-outoplossing, bijvoorbeeld een op de een of andere manier vaste koptekst, voettekst en inhoud op volledige hoogte die het restscherm in beslag neemt. Zo ja, dan kan dit bericht helpen, het werkt op IE7+, enz.

http://blog.stevensanderson.com/2011/10/05/full-Height-app-layouts-a-cs-trick-to-make-it-asier/

en hier zijn enkele fragmenten uit die post:

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

Antwoord 4, Autoriteit 11%

In plaats van tabellen in de markup te gebruiken, kunt u CSS-tabellen gebruiken.

Markup

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

(relevante) CSS

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

FIDDLE1en FIDDLE2

Enkele voordelen van deze methode zijn:

1) Minder opmaak

2) Markup is semantischer dan tabellen, omdat dit geen tabelgegevens zijn.

3) Browserondersteuning is zeer goed: IE8+, alle moderne browsers en mobiele apparaten (caniuse)

Voor de volledigheid zijn hier de equivalente HTML-elementen voor css-eigenschappen voor het Het CSS-tabelmodel

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 }

Antwoord 5, autoriteit 8%

Alleen CSS-benadering (indien hoogte bekend/vast)

Als u wilt dat het middelste element verticaal de hele pagina overspant, kunt u calc()die is geïntroduceerd in CSS3.

Ervan uitgaande dat we een vaste hoogteheaderen footerelementen hebben en we willen dat de sectiontag de volledige beschikbare verticale hoogte…

Demo

Veronderstelde opmaaken uw CSS zou moeten zijn

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>

Antwoord 6, autoriteit 5%

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

code:

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

Antwoord 7, autoriteit 5%

Een eenvoudige oplossing met flexbox:

html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex-grow: 1;
}

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

Antwoord 8, autoriteit 3%

Wat dacht je ervan om gewoon vhte gebruiken, wat staat voor view heightin CSS…

Bekijk het codefragmentdat ik hieronder voor je heb gemaakt en voer het uit:

body {
  padding: 0;
  margin: 0;
}
.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

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

Antwoord 9, autoriteit 3%

CSS3 Eenvoudige Manier

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

alle grote browsers ondersteunen dit tegenwoordig, dus ga je gang als je geen vereiste hebt om vintage browsers te ondersteunen.

Antwoord 10, autoriteit 2%

Geen van de geposte oplossingen werkt als je de onderste div nodig hebt om te scrollen als de inhoud te lang is. Hier is een oplossing die in dat geval werkt:

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

Antwoord 11, Autoriteit 2%

Het kan puur worden gedaan door CSSmet 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;
}

en de HTML

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

Ik heb het gecontroleerd, het werkt in alle belangrijke browsers: Chrome, IE, en FireFox

Antwoord 12, Autoriteit 2%

Disclaimer: Het geaccepteerde antwoord geeft het idee van de oplossing, maar ik vind het een beetje opgeblazen met een onnodige wrapper en CSS-regels. Hieronder is een oplossing met heel weinig CSS-regels.

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

Bovenstaande oplossing gebruikt viewport-eenhedenen flexbox, en is daarom IE10+, op voorwaarde dat u de oude syntaxis voor IE10 gebruikt.

Codepen om mee te spelen: link naar codepen

Of deze, voor degenen die de hoofdcontainer nodig hebben om te kunnen scrollen in geval van overvolle inhoud: link naar codepen

Antwoord 13, autoriteit 2%

Ik heb hier ook naar een antwoord gezocht. Als je het geluk hebt om IE8 en hoger te targeten, kun je display:tableen gerelateerde waarden gebruiken om de weergaveregels te krijgen van tabellen met elementen op blokniveau, waaronder div.

Als je nog meer geluk hebt en je gebruikers topbrowsers gebruiken (als dit bijvoorbeeld een intranet-app is op computers die je beheert, zoals mijn laatste project), kun je de nieuwe Flexibele boxlay-outin CSS3!

Antwoord 14, autoriteit 2%

Wat voor mij werkte (met een div binnen een andere div en ik neem aan in alle andere omstandigheden) is om de onderste padding in te stellen op 100%. Dat wil zeggen, voeg dit toe aan je css / stylesheet:

padding-bottom: 100%;

Antwoord 15, autoriteit 2%

Er zijn nu een heleboel antwoorden, maar ik ontdekte dat ik height: 100vh;gebruikte om aan het div-element te werken dat de volledige beschikbare verticale ruimte moet opvullen.

Op deze manier hoef ik niet te spelen met weergave of positionering. Dit kwam goed van pas bij het gebruik van Bootstrap om een dashboard te maken waarin ik een zijbalk en een hoofdbalk had. Ik wilde dat het hoofdgedeelte zou worden uitgerekt en de hele verticale ruimte zou vullen, zodat ik een achtergrondkleur kon toepassen.

div {
    height: 100vh;
}

Ondersteunt IE9 en hoger: klik om de link te zien

Antwoord 16

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

In alle normale browsers kun je als broer of zus de “header” div voor de inhoud plaatsen en dezelfde CSS zal werken. IE7- interpreteert de hoogte echter niet correct als de float in dat geval 100% is, dus de header moet IN de inhoud staan, zoals hierboven. De overloop: auto veroorzaakt dubbele schuifbalken op IE (waarbij altijd de schuifbalk van de viewport zichtbaar is, maar uitgeschakeld), maar zonder deze wordt de inhoud geknipt als deze overloopt.

Antwoord 17

Als je kunt omgaan met het niet ondersteunen van oude browsers (dat wil zeggen, MSIE 9 of ouder), kun je dit doen met Flexible Box Layout Moduledie al W3C CR is. Die module maakt ook andere leuke trucs mogelijk, zoals het opnieuw bestellen van inhoud.

Helaas ondersteunt MSIE 9 of lager dit niet en moet u voor elke andere browser dan Firefox het leveranciersvoorvoegsel gebruiken voor de CSS-eigenschap. Hopelijk laten andere leveranciers het voorvoegsel ook snel vallen.

Een andere keuze zou CSS-rasterlay-outzijn, maar dat heeft nog minder ondersteuning van stabiele versies van browsers. In de praktijk ondersteunt alleen MSIE 10 dit.

Jaar update 2020: alle moderne browsers ondersteunen zowel display: flexals display: grid. De enige die ontbreekt is ondersteuning voor subgriddie alleen door Firefox wordt ondersteund. Merk op dat MSIE geen van beide door de specificatie ondersteunt, maar als je bereid bent om MSIE-specifieke CSS-hacks toe te voegen, kan het gemaakt worden om zich te gedragen. Ik zou willen voorstellen om MSIE gewoon te negeren, omdat zelfs Microsoft zegt dat het niet meer mag worden gebruikt. Microsoft Edge ondersteunt deze functies prima.

Antwoord 18

CSS-rasteroplossing

Enkel de bodymet display:griden de grid-template-rowsmet autoen de frWAARDE EIGENDOM.

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

Antwoord 19

Ik word een tijdje met dit en eindigde met het volgende:

Aangezien het gemakkelijk is om de inhoud Div dezelfde hoogte als de ouder te maken, maar blijkbaar moeilijk om het de bovenliggende hoogte te maken minus de headerhoogte Ik besloot om inhoud div volledige hoogte te maken, maar dan absoluut in de linkerbovenhoek en dan Definieer een vulling voor de bovenkant die de hoogte van de kop heeft. Op deze manier wordt de inhoud netjes onder de kop weergegeven en vult de hele resterende ruimte:

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

Antwoord 20

In Bootstrap:

CSS-stijlen:

html, body {
    height: 100%;
}

1) Vul gewoon de hoogte van de resterende schermruimte:

<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) vul de hoogte van de resterende schermruimte en lijn de inhoud uit met het midden van het bovenliggende element:

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

Antwoord 21

Waarom niet gewoon zo?

html, body {
    height: 100%;
}
#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}
#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

Je html en body (in die volgorde) een hoogte geven en dan je elementen gewoon een hoogte geven?

Werkt voor mij

Antwoord 22

style="height:100vh"

het probleem voor mij opgelost. In mijn geval heb ik dit toegepast op de vereiste div

Antwoord 23

Je kunt eigenlijk display: tablegebruiken om het gebied te splitsen in twee elementen (koptekst en inhoud), waarbij de koptekst in hoogte kan variëren en de inhoud de resterende ruimte vult. Dit werkt met de hele pagina, maar ook als het gebied gewoon de inhoud is van een ander element dat is gepositioneerd met positioningesteld op relative, absoluteof fixed. Het werkt zolang het bovenliggende element een hoogte heeft die niet nul is.

Bekijk deze vioolen ook de onderstaande code:

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>

Antwoord 24

Dit is mijn eigen minimale versie van Pebbl’s oplossing. Het duurde een eeuwigheid om de truc te vinden om het werkend te krijgen in IE11. (Ook getest in Chrome, Firefox, Edge en Safari.)

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

<body>
  <section>
    <div>FIT</div>
    <div>GROW</div>
  </section>
</body>

Antwoord 25

Vincent, ik zal opnieuw antwoorden op basis van je nieuwe vereisten. Aangezien het u niet uitmaakt dat de inhoud wordt verborgen als deze te lang is, hoeft u de koptekst niet te laten zweven. Zet gewoon overflow verborgen op de html- en body-tags en stel de hoogte van #contentin op 100%. De inhoud is altijd langer dan de viewport met de hoogte van de koptekst, maar wordt verborgen en veroorzaakt geen schuifbalken.

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

Antwoord 26

Probeer dit

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

Antwoord 27

Voor mobiele app gebruik ik alleen VH en 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/

Antwoord 28

Ik vond een vrij eenvoudige oplossing, want voor mij was het slechts een ontwerpprobleem.
Ik wilde dat de rest van de pagina niet wit zou zijn onder de rode voettekst.
Dus ik heb de achtergrondkleur van de pagina’s op rood gezet. En de inhoud achtergrondkleur naar wit.
Met de inhoudshoogte ingesteld op bijv. 20em of 50% een bijna lege pagina laat niet de hele pagina rood.

Antwoord 29

Ik had hetzelfde probleem, maar ik kon de oplossing niet maken met bovenstaande flexboxen. Dus heb ik mijn eigen sjabloon gemaakt, dat bestaat uit:

een kop met een element van vaste grootte
een voettekst
een zijbalk met een schuifbalk die de resterende hoogte inneemt
inhoud

Ik heb flexboxen gebruikt, maar op een eenvoudigere manier, met alleen de eigenschappen display: flexen flex-direction: row|column:

Ik gebruik hoekig en ik wil dat mijn componentgrootten 100% van hun bovenliggende element zijn.

De sleutel is om de grootte (in procenten) voor alle ouders in te stellen om hun grootte te beperken. In het volgende voorbeeld heeft de myapp-hoogte 100% van de viewport.

De hoofdcomponent heeft 90% van de viewport, omdat kop- en voettekst 5% hebben.

Ik heb mijn sjabloon hier gepost: 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>

Antwoord 30

Een spin-off van het idee van Mr. Alien…

Dit lijkt een schonere oplossing dan de populaire flexbox-oplossing voor CSS3-compatibele browsers.

Gebruik gewoon min-height(in plaats van hoogte) met calc() voor het inhoudsblok.

De calc() begint met 100% en trekt de hoogte van kop- en voetteksten af (moet opvulwaarden bevatten)

Het gebruik van “min-height” in plaats van “height” is bijzonder handig, zodat het kan werken met door javascript weergegeven inhoud en JS-frameworks zoals Angular2. Anders zal de berekening de voettekst niet naar de onderkant van de pagina duwen zodra de door javascript weergegeven inhoud zichtbaar is.

Hier is een eenvoudig voorbeeld van een kop- en voettekst met 50px hoogte en 20px opvulling voor beide.