it-swarm.it

Fai un div riempire l'altezza dello spazio rimanente sullo schermo

Sto lavorando a un'applicazione web in cui voglio che il contenuto riempia l'altezza dell'intero schermo.

La pagina ha un'intestazione, che contiene un logo e informazioni sull'account. Questa potrebbe essere un'altezza arbitraria. Voglio che il contenuto div per riempire il resto della pagina verso il basso.

Ho un'intestazione div e un contenuto div. Al momento sto usando una tabella per il layout in questo modo:

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

L'intera altezza della pagina è piena e non è richiesto lo scorrimento.

Per qualsiasi cosa all'interno del div contenuto, l'impostazione top: 0; lo metterà sotto l'intestazione. A volte il contenuto sarà una tabella reale, con l'altezza impostata al 100%. Mettere header all'interno di content non permetterà che funzioni.

C'è un modo per ottenere lo stesso effetto senza usare table?

Aggiornamento:

Gli elementi all'interno del contenuto div avranno altezze impostate anche su percentuali. Quindi qualcosa al 100% all'interno di div lo riempirà fino in fondo. Come due elementi al 50%.

Aggiornamento 2:

Ad esempio, se l'intestazione occupa il 20% dell'altezza dello schermo, una tabella specificata al 50% all'interno di #content occuperà il 40% dello spazio dello schermo. Finora, avvolgere l'intera cosa in un tavolo è l'unica cosa che funziona.

1605
Vincent McNabb

Aggiornamento 2015: l'approccio flexbox

Ci sono altre due risposte che menzionano brevemente flexbox ; tuttavia, è stato più di due anni fa e non forniscono alcun esempio. Le specifiche per la flexbox si sono definitivamente risolte ora.

Nota: sebbene la specifica CSS Flexible Boxes Layout sia nella fase Candidate Recommendation, non tutti i browser l'hanno implementata. L'implementazione di WebKit deve essere preceduta da -webkit-; Internet Explorer implementa una vecchia versione della specifica, preceduta da -ms-; Opera 12.10 implementa l'ultima versione della specifica, non prefissata. Vedi la tabella di compatibilità su ogni proprietà per uno stato di compatibilità aggiornato.

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

Tutti i principali browser e IE11 + supportano Flexbox. Per IE 10 o versioni precedenti, puoi utilizzare lo spessore FlexieJS.

Per verificare il supporto corrente puoi anche vedere qui: http://caniuse.com/#feat=flexbox

Esempio di lavoro

Con flexbox puoi facilmente passare da una qualsiasi delle tue righe o colonne a dimensioni fisse, dimensioni del contenuto o dimensioni dello spazio rimanente. Nel mio esempio ho impostato l'intestazione per eseguire lo snap al suo contenuto (come da domanda OPs), ho aggiunto un piè di pagina per mostrare come aggiungere una regione ad altezza fissa e quindi impostare l'area del contenuto per riempire lo spazio rimanente.

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>

Nel CSS sopra, la proprietà flex abbrevia il flex-grow , flex-shrink e flex-base proprietà per stabilire la flessibilità di gli articoli flessibili. Mozilla ha una buona introduzione al modello di scatole flessibili .

876
Pebbl

Non c'è davvero un suono, un modo cross-browser per farlo in CSS. Supponendo che il layout abbia complessità, è necessario utilizzare JavaScript per impostare l'altezza dell'elemento. L'essenza di ciò che devi fare è:

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

Una volta ottenuto questo valore e impostato l'altezza dell'elemento, è necessario associare i gestori di eventi alla finestra onload e onresize in modo da poter attivare la funzione di ridimensionamento.

Inoltre, supponendo che il tuo contenuto possa essere più grande del viewport, dovrai impostare overflow-y per scorrere.

218
NICCAI

Il post originale è più di 3 anni fa. Immagino che molte persone che vengono in questo post come me stiano cercando una soluzione di layout simile a un'app, diciamo in qualche modo un intestazione, un piè di pagina e un contenuto a piena altezza che occupano la schermata di riposo. Se è così, questo post può aiutare, funziona su IE7 +, ecc.

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

E qui ci sono alcuni frammenti di quel 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>
161
h--n

Approccio solo CSS (se l'altezza è nota/fissa)

Quando vuoi che l'elemento intermedio si estenda su tutta la pagina verticalmente, puoi usare calc() che è introdotto in CSS3.

Supponendo di avere un altezza fissa header e footer elementi e vogliamo che il tag section prenda l'intera altezza verticale disponibile ...

Demo

Markup presunto

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

Quindi il tuo CSS dovrebbe essere

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

Quindi, ecco cosa sta facendo, sommando l'altezza degli elementi e deducendo da 100% usando la funzione calc().

Assicurati di utilizzare height: 100%; per gli elementi parent.

82
Mr. Alien

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

codice:

  
.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>
47
nguyên

Che ne dici di usare semplicemente vh che sta per view height in CSS ...

Guarda lo snippet di codice che ho creato per te qui sotto ed eseguilo:

body {
  padding: 0;
  margin: 0;
}

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

Inoltre, guarda l'immagine qui sotto che ho creato per te:

Make a div fill the height of the remaining screen space

34
Alireza

Modo semplice CSS3

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

tutti i principali browser in questi giorni lo supportano, quindi prosegui se non hai bisogno di supportare i browser vintage.

30
dev.meghraj

Una soluzione semplice, usando la flexbox:

html,
body {
  height: 100%;
}

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

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

Esempio di codice

Una soluzione alternativa, con un div centrato all'interno del contenuto div

26
zok

Potrebbe essere fatto esclusivamente da CSS usando 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;
}

e il HTML

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

L'ho verificato, funziona su tutti i principali browser: Chrome, IE e FireFox

26
Ormoz

Nessuna delle soluzioni pubblicate funziona quando è necessario il div bottom per scorrere quando il contenuto è troppo alto. Ecco una soluzione che funziona in questo caso:

HTML:

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

CSS:

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

Origine originale: riempimento dell'altezza rimanente di un contenitore durante la gestione di overflow in CSS

Anteprima live di JSFiddle

25
John Kurlak

Ho cercato anche una risposta per questo. Se sei abbastanza fortunato da poter scegliere come target IE8 e versioni successive, puoi utilizzare display:table e i relativi valori per ottenere le regole di rendering delle tabelle con elementi a livello di blocco tra cui div.

Se sei ancora più fortunato e i tuoi utenti utilizzano browser di livello superiore (ad esempio, se si tratta di un'app intranet sui computer che controlli, come il mio ultimo progetto), puoi utilizzare il nuovo Layout della scatola flessibile in CSS3!

22
Chris

Ciò che ha funzionato per me (con un div all'interno di un altro div e presumo in tutte le altre circostanze) è quello di impostare il padding inferiore al 100%. Cioè, aggiungi questo al tuo css/foglio di stile:

padding-bottom: 100%;

Disclaimer: la risposta accettata dà l'idea della soluzione, ma la trovo un po 'gonfia con un involucro non necessario e regole CSS. Di seguito è riportata una soluzione con pochissime regole 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 */
}

Soluzione sopra utilizza unità viewport e flexbox , ed è quindi IE10 +, fornendo usi la vecchia sintassi per IE10.

Codepen per giocare con: link a codepen

O questo, per chi ha bisogno che il contenitore principale sia scorrevole in caso di contenuti traboccanti: link a codepen

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

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

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

</style>
</head>
<body>

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

</body>
</html>

In tutti i browser sane, puoi mettere il div "header" prima del contenuto, come un fratello, e lo stesso CSS funzionerà. Tuttavia, IE7- non interpreta correttamente l'altezza se il float è al 100% in quel caso, quindi l'intestazione deve essere nel contenuto, come sopra. L'overflow: auto causerà doppie barre di scorrimento su IE (che ha sempre la barra di scorrimento della vista visibile, ma disabilitata), ma senza di essa, il contenuto si bloccherà se fuoriesce.

12
Jerph

Ho lottato con questo per un po 'e ho finito con il seguente:

Poiché è facile rendere il contenuto DIV della stessa altezza del genitore ma apparentemente difficile renderlo l'altezza genitore meno l'altezza dell'intestazione, ho deciso di rendere il contenuto div a tutta altezza ma posizionarlo assolutamente nell'angolo in alto a sinistra e quindi definire un padding per la parte superiore che ha l'altezza dell'intestazione. In questo modo il contenuto viene visualizzato ordinatamente sotto l'intestazione e riempie l'intero spazio rimanente:

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

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

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

Se riesci a gestire i vecchi browser (cioè, MSIE 9 o precedente), puoi farlo con Modulo di layout della scatola flessibile che è già W3C CR. Questo modulo consente anche altri trucchi di Nizza, come riordinare i contenuti.

Sfortunatamente, MSIE 9 o meno non supporta questo e devi usare il prefisso del venditore per la proprietà CSS per ogni browser diverso da Firefox. Speriamo che anche altri distributori abbandonino presto il prefisso.

Un'altra scelta sarebbe CSS Grid Layout ma che ha ancora meno supporto dalle versioni stabili dei browser. In pratica, solo MSIE 10 supporta questo.

10

Ci sono un sacco di risposte ora, ma ho trovato usando height: 100vh; per lavorare sull'elemento div che ha bisogno di riempire l'intero spazio verticale disponibile.

In questo modo, non ho bisogno di giocare con il display o il posizionamento. Questo è stato utile quando si utilizza Bootstrap per creare un dashboard in cui avevo una barra laterale e un main. Volevo che il main si allungasse e riempisse l'intero spazio verticale in modo da poter applicare un colore di sfondo.

div {
    height: 100vh;
}

Supporta IE9 e versioni successive: fai clic per vedere il collegamento

10
Puiu

Perché non proprio così?

html, body {
    height: 100%;
}

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

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

Dando un html e un corpo (in questo ordine) ad un'altezza e poi dai ai tuoi elementi un'altezza?

Per me va bene

9
Thaoms
 style="height:100vh"

risolto il problema per me. Nel mio caso l'ho applicato al div richiesto

7
Zohab Ali

CSS Grid Solution

Basta definire body con display:grid e grid-template-rows usando auto e la proprietà del valore fr.

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

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

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

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

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

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

Una guida completa alle griglie @ CSS-Tricks.com

6
Paulie_D

È possibile utilizzare display: table per dividere l'area in due elementi (intestazione e contenuto), in cui l'intestazione può variare in altezza e il contenuto riempie lo spazio rimanente. Funziona con l'intera pagina, così come quando l'area è semplicemente il contenuto di un altro elemento posizionato con position impostato su relative, absolute o fixed. Funzionerà finché l'elemento genitore avrà un'altezza diversa da zero.

Vedi questo violino e anche il codice qui sotto:

CSS:

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

p {
    margin: 0;
    padding: 0;
}

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

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

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

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

HTML:

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

Vincent, ti risponderò ancora usando i tuoi nuovi requisiti. Dal momento che non ti interessa che il contenuto sia nascosto se è troppo lungo, non hai bisogno di far fluttuare l'intestazione. Basta mettere overflow nascosto sui tag html e body e impostare #content height al 100%. Il contenuto sarà sempre più lungo della finestra rispetto all'altezza dell'intestazione, ma sarà nascosto e non causerà scrollbar.

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

    #header {
      background: red;
    }

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

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

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

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

</body>
</html>
5
Jerph

Prova questo

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

Ho trovato una soluzione abbastanza semplice, perché per me era solo un problema di design. Volevo che il resto della pagina non fosse bianco sotto il piè rosso. Così ho impostato il colore di sfondo delle pagine in rosso. E il contenuto backgroundcolor al bianco. Con l'altezza del contenuto impostata ad es. 20 o 50% una pagina quasi vuota non lascerà l'intera pagina rossa.

3
htho

Per l'app mobile uso solo VH e VW

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

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

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

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

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

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

3
grinmax

Tirando fuori l'idea di Mr. Alien ...

Questa sembra una soluzione più pulita rispetto alla popolare scatola flessibile per browser compatibili con CSS3.

Basta usare min-height (anziché height) con calc () al blocco del contenuto.

Il calc () inizia con il 100% e sottrae l'altezza di intestazioni e piè di pagina (è necessario includere i valori di riempimento)

L'utilizzo di "min-height" invece di "height" è particolarmente utile in modo che possa funzionare con i contenuti resi da javascript e framework JS come Angular2. In caso contrario, il calcolo non sposterà il piè di pagina nella parte inferiore della pagina una volta che il contenuto renderizzato JavaScript sarà visibile.

Ecco un semplice esempio di intestazione e piè di pagina con altezza di 50px e riempimento di 20px per entrambi.

Html:

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

Css:

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

Certo, la matematica può essere semplificata ma ti viene l'idea ...

2
Pat M

Ho avuto lo stesso problema, ma non sono riuscito a far funzionare la soluzione con le flexbox di cui sopra. Così ho creato il mio modello, che include:

  • un'intestazione con un elemento di dimensioni fisse
  • un piè di pagina
  • una barra laterale con una barra di scorrimento che occupa l'altezza rimanente
  • soddisfare

Ho usato le flexbox ma in un modo più semplice, usando solo proprietà display: flex e flex-direction: row | column :

Io uso angolare e voglio che le mie dimensioni dei componenti siano al 100% del loro elemento genitore.

La chiave è impostare la dimensione (in percentuale) per tutti i genitori in ordine per limitare le loro dimensioni. Nell'esempio seguente l'altezza di myapp ha il 100% del viewport.

Il componente principale ha il 90% del viewport, perché l'intestazione e il piè di pagina hanno il 5%.

Ho pubblicato il mio modello qui: https://jsfiddle.net/abreneliere/mrjh6y2e/3

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

Html:

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

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

È dinamico calcare lo spazio sullo schermo, meglio usare Javascript.

Puoi usare la tecnologia CSS-IN-JS, come sotto lib:

https://github.com/cssobj/cssobj

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

0
James Yang