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


1910

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

La pagina ha un'intestazione, che contiene un logo e informazioni sull'account. Potrebbe essere un'altezza arbitraria. Voglio che il div del contenuto riempia il resto della pagina fino in fondo.

Ho un'intestazione dive 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 è necessario lo scorrimento.

Per qualsiasi cosa all'interno del div del contenuto, l'impostazione top: 0;lo posizionerà proprio sotto l'intestazione. A volte il contenuto sarà una vera tabella, con la sua altezza impostata al 100%. Mettere headerdentro contentnon permetterà a questo di funzionare.

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

Aggiornare:

Gli elementi all'interno del contenuto divavranno anche altezze impostate su percentuali. Quindi qualcosa al 100% all'interno lo divriempirà 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 #contentoccuperebbe il 40% dello spazio dello schermo. Finora, avvolgere l'intera cosa in un tavolo è l'unica cosa che funziona.


31
Per chiunque inciampare qui in futuro, puoi ottenere il layout di tabella desiderato nella maggior parte dei browser, senza il markup della tabella, utilizzando display:tablee le proprietà correlate, vedi questa risposta a una domanda molto simile.
AmeliaBR,

3
Ho provato a ripetere la configurazione - jsfiddle.net/ceELs - ma non funziona, cosa mi sono perso?
Gill Bates,

5
@Sig. La risposta di Alien è semplice e utile, controlla http://stackoverflow.com/a/23323175/188784
Gohan

4
In realtà, ciò che descrivi non funziona, anche con le tabelle: se il contenuto occupa più spazio verticale rispetto all'altezza dello schermo, la cella della tabella e l'intera tabella si espandono oltre il fondo dello schermo. Overflow dei tuoi contenuti: auto non farà apparire una barra di scorrimento.
Damien,

@GillBates funzionerà dopo aver specificato l'altezza dell'aspetto dell'elemento genitore su jsfiddle.net/ceELs/5
Michal Vašut

Risposte:


1115

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 Flexbox sono state definitivamente risolte ora.

Nota: sebbene le specifiche del layout CSS per scatole flessibili siano nella fase di Raccomandazione dei candidati, non tutti i browser lo hanno implementato. L'implementazione di WebKit deve essere preceduta da -webkit-; Internet Explorer implementa una vecchia versione delle specifiche, con il prefisso -ms-; Opera 12.10 implementa l'ultima versione delle specifiche, non risolta. Vedere la tabella di compatibilità su ciascuna proprietà per uno stato di compatibilità aggiornato.

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

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

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

Esempio funzionante

Con flexbox puoi passare facilmente da una qualsiasi delle tue righe o colonne a dimensioni fisse, dimensioni dei contenuti o dimensioni dello spazio rimanente. Nel mio esempio ho impostato l'intestazione per agganciarla al suo contenuto (come per la domanda sui PO), 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, i flex abbreviazioni di proprietà del flex-grow , flex-shrink , e flex-base proprietà per stabilire la flessibilità degli elementi flessibili. Mozilla ha una buona introduzione al modello di scatole flessibili .


9
Perché l' flex: 0 1 30px;attributo in box .rowin quanto sovrascrive in ogni div?
Erdal G.

11
Ecco il supporto browser per flexbox - bello vedere tutto quel verde - caniuse.com/#feat=flexbox
Brian Burns

1
Il collegamento a Flexie.js è morto. Qui il progetto github github.com/doctyper/flexie
ses3ion

52
Sicuramente è un ottimo approccio e quasi funziona;) C'è un piccolo problema quando un contenuto di contenuto div. Supera un'altezza flessibile originale. Nell'attuale implementazione il "piè di pagina" sarà abbassato e questo non è quello che gli sviluppatori si aspettano;) Quindi ho fatto una soluzione molto semplice. jsfiddle.net/przemcio/xLhLuzf9/3 Ho aggiunto la flessibilità aggiuntiva sul contenitore e lo scorrimento di overflow.
przemcio,

12
@przemcio punto bello, ma non credo che avere contenuto scorrevole è ciò che ogni aspetta per sviluppatori;) - si deve solo bisogno di aggiungere overflow-y: autoa .row.contentraggiungere quello che vi serve comunque.
Pebbl

226

Non esiste davvero un modo valido e 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 collegare i gestori di eventi sia al caricamento della finestra che al ridimensionamento in modo da poter attivare la funzione di ridimensionamento.

Inoltre, supponendo che i tuoi contenuti possano essere più grandi del viewport, dovrai impostare overflow-y per scorrere.


2
Questo è quello che sospettavo. Tuttavia, l'app funzionerà anche con Javascript disattivato, quindi suppongo che continuerò a utilizzare la tabella.
Vincent McNabb,

6
Vincent, un modo per difendere la tua posizione. Stavo cercando di fare esattamente la stessa cosa e non sembra possibile con CSS? Non ne sono sicuro, ma nessuna delle altre tonnellate di soluzioni fa ciò che hai descritto. Quello javascript è l'unico che funziona correttamente a questo punto.
Travis,

5
cosa succede se l'altezza della finestra cambia
Techsin

4
Voglio dire ... perché non stiamo usando calc nel 2013?
Kamii,

4
altezza: calc (100vh - 400px); è uno stile CSS valido che fa esattamente ciò di cui tratta questo post. Tutte le altre soluzioni si basano su un'altezza padre fissa o su un display a blocchi.
WilliamX,

167

Il post originale è più di 3 anni fa. Immagino che molte persone che arrivano in questo post come me siano alla ricerca di una soluzione di layout simile ad un'app, per esempio un'intestazione, un piè di pagina e un contenuto a tutta altezza fissi che occupino la schermata di riposo. In tal caso, 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>


74
C'è solo un problema con questo: l'intestazione e il piè di pagina non sono dimensionati automaticamente. Quella è la vera difficoltà, e che è il motivo per cui un "questo non è possibile" risposta è attualmente in cima ...
Romano Starkov

Avevo bisogno di un'intestazione 55px e di un div che riempisse il resto dell'altezza del documento. questa è la soluzione!
Matías Cánepa,

Sei la bomba, ci sto provando da tanto tempo e questa è l'unica soluzione che ho trovato. Avevo bisogno che il mio elemento di navigazione avesse un'altezza di 60 px in alto e il resto fosse al 100%, questo ha risolto.
Adam Waite,

Funziona bene, tranne per il fatto che ho un leggero problema: se inserisco un elemento display: tablenel corpo, sembra che trabocchi il corpo. Quindi fare height: 100%non produce l'altezza corretta.
GSTAR

4
.colnon è usato, vero?
slartidan,

143

Invece di utilizzare le tabelle nel markup, è possibile utilizzare le tabelle CSS.

markup

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

(Rilevante) CSS

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

FIDDLE1 e FIDDLE2

Alcuni vantaggi di questo metodo sono:

1) Meno markup

2) Il markup è più semantico delle tabelle, perché non si tratta di dati tabulari.

3) Il supporto del browser è molto buono : IE8 +, Tutti i browser e dispositivi mobili moderni ( caniuse )


Solo per completezza, ecco gli elementi HTML equivalenti alle proprietà css per il modello di tabella CSS

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 } 

3
mi è stato appena indicato la tecnica delle tabelle CSS . Si scopre che la risposta era già in questa domanda con risposta. Questa è la soluzione migliore; pulito, elegante e usando lo strumento esatto nel modo esatto in cui era previsto. Tabelle CSS
Ian Boyd

Il codice del violino non corrisponde esattamente alla risposta qui. L'aggiunta html, body { height: 100%, width: 100% }sembrava critica nei miei test.
mlibby,

8
Una caratteristica fastidiosa delle tabelle CSS è esattamente la stessa delle tabelle normali: se il contenuto è troppo grande, espandono la cella per adattarla. Ciò significa che potrebbe essere necessario limitare le dimensioni (altezza massima) o impostare l'altezza dal codice se la pagina è dinamica. Mi mancano davvero le griglie Silverlight! :(
Gone Coding

3
Puoi sempre aggiungere un contenitore assolutamente posizionato all'interno dell'elemento riga del tabel, quindi impostare la sua larghezza e altezza al 100%. Ricorda di impostare la posizione su relativa anche sull'elemento della riga della tabella.
Mike Mellor,

1
@MikeMellor non funziona in IE11 sebbene sembri ignorare il relativeposizionamento table-rowsull'elemento, quindi prende l'altezza dell'ascendente posizionato per primo che non è un elemento di tabella.
Dwelle,

96

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

Quando vuoi che l'elemento centrale si estenda su tutta la pagina in verticale, puoi usare quello calc()che è stato introdotto in CSS3.

Supponendo che abbiamo un'altezza header e footerelementi fissi e vogliamo che il sectiontag prenda l'intera altezza verticale disponibile ...

dimostrazione

Assunto markup e 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;
}
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

Quindi qui, ciò che sto facendo è sommare l'altezza degli elementi e quindi dedurre 100%dall'uso della calc()funzione.

Assicurati solo di usarlo height: 100%;per gli elementi principali.


13
L'OP ha affermato che l'intestazione potrebbe essere un'altezza arbitraria. Quindi, se non conosci in anticipo l'altezza, non potrai utilizzare calc :(
Danield,

1
@Danield Ecco perché ho citato l' altezza fissa :)
Mr. Alien,

3
Questa è la soluzione che ha funzionato per me e non mi ha richiesto di ridisegnare le mie pagine esistenti attorno ai flexbox. Se stai usando LESS, ovvero Bootstrap, assicurati di leggere il post di coderwall su come sfuggire alla funzione calc () in modo che LESS non la gestisca.
jlyonsmith il

1
Op ha detto "Potrebbe essere un'altezza arbitraria". Mezzi arbitrari decisi dal progettista, così riparati. Questa soluzione è di gran lunga la migliore.
Jck

57

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>


1
Secondo me la soluzione più pulita. È sicuramente meglio che aggiungere javascript. (ma la risposta è già stata pubblicata nel 2015 da qualcun altro)
bvdb

questo sembra molto più pulito.
programmatore

44

Una soluzione semplice, usando flexbox:

html,
body {
  height: 100%;
}

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

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

Campione di Codepen

Una soluzione alternativa, con un div centrato nel div contenuto


4
Questa è sicuramente la risposta migliore. Funziona come un incantesimo per le home page di hero-img o una combinazione dell'eroe-img con la tua barra di navigazione
noobcoderiam,

jsfiddle.net/31ng75du/5 Testato con Chrome, FF, Edge, Vivaldi
user2360831

Questo è semplice e migliore.
Dev Anand

38

Che ne dite è sufficiente utilizzare vhche sta per view heightin CSS ...

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

body {
  padding: 0;
  margin: 0;
}

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

Inoltre, guarda l'immagine sotto la quale ho creato per te:

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


10
Va bene solo se vuoi che un div si estenda per l'intera altezza della finestra. Ora metti un div header sopra di esso con un'altezza sconosciuta.
LarryBud

@LarryBud hai ragione, questo rende div wrapper, quindi tutto dovrebbe andare dentro questo div ...
Alireza

34

CSS3 modo semplice

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

al giorno d'oggi tutti i principali browser lo supportano, quindi vai avanti se non hai bisogno di supportare i browser vintage.


4
Questo non funziona se non conosci l'altezza degli altri elementi (ad es. Se contengono un numero variabile di elementi figlio).
Ege Ersoz,

puoi anche usare 100vh, chiunque lo faccia: assicurati di mettere spazi tra il meno e gli elementi
htafoya

28

Si potrebbe fare semplicemente CSSusando 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>

Ho controllato, Funziona in tutti i principali browser: Chrome, IE, eFireFox


2
Wow, mai sentito parlare di vhe vwunità prima. Maggiori informazioni: snook.ca/archives/html_and_css/vm-vh-units
Steve Bennett

Sfortunatamente, questo non supporta IE8 :(
Scott

2
Ho provato questo approccio, ma l' height: 100%on ha fatto #contentsì che la sua altezza corrispondesse a quella di #page, ignorando #tdcontentdel tutto l'altezza. Con molto contenuto, la barra di scorrimento si estende oltre la parte inferiore della pagina.
Brandon,

28

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

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

Fonte originale: riempimento dell'altezza rimanente di un contenitore durante la gestione dell'overflow nei CSS

JSFiddle anteprima dal vivo


Grazie!!! Ho provato tutte le risposte non-table, non-flexbox, e questa è l'unica che ha funzionato correttamente al 100%. Una domanda: la fonte originale ha solo un body-content-wrapper, e le cose sembrano funzionare bene senza il doppio wrapper (senza alcuna table-cells). C'è un problema nel farlo in quel modo?
Brandon,

1
@BrandonMintern Se non hai le celle della tabella, non funziona in IE8 e IE9. (Vedi commento nell'articolo originale.)
John Kurlak,

Sì, le celle sono richieste anche in IE10. Sfortunatamente, in IE10 e sotto, l' .bodyaltezza finisce per essere la stessa altezza di quella impostata .container. La barra di scorrimento verticale è ancora nel posto giusto, ma le .containerestremità si allungano più di quanto desideriamo. Quando è a schermo intero, la parte inferiore .bodyè fuori dalla parte inferiore dello schermo.
Brandon,

Grazie, @JohnKurlak. È l'unica soluzione che ha funzionato nella mia situazione (il modo flexbox è stato bloccato da un comportamento errato in una particolare versione di Chrome utilizzata dal mio cliente)
Maksym Demidas

Santo ****! Ho cercato questa risposta per così tanto tempo! Grazie mille. Flexbox non ha funzionato qui, ma le celle della tabella hanno funzionato davvero. Sorprendente.
aabbccsmith

25

Ho cercato una risposta anche per questo. Se sei abbastanza fortunato da essere in grado di scegliere come target IE8 e versioni successive, puoi utilizzare display:tablei valori correlati per ottenere le regole di rendering delle tabelle con elementi a livello di blocco incluso div.

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


22

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

padding-bottom: 100%;

14
100% di cosa? Se provo questo, ottengo un enorme spazio vuoto e inizia lo scorrimento.
mlibby,

Il 100% delle dimensioni del riquadro di visualizzazione potrebbe essere @mlibby. Se imposti anche html e body su un'altezza del 100%, il div può andare al 100%. Con un solo div, il 100% sarà relativo al contenuto del div. Non l'ho provato con un div nidificato.
Jess,

1
Significa il 100% dell'altezza dell'elemento (aggiunto come imbottitura dell'elemento), il che lo rende il doppio dell'altezza. Nessuna certezza riempirà la pagina e sicuramente non la risposta alla domanda. Potrebbe già notarlo riempire di più della finestra.
Martin

2
padding-bottom: 100% imposta l'altezza + 100% della larghezza del
Romeno

1
da w3school: specifica un'imbottitura inferiore in percentuale della larghezza dell'elemento. w3schools.com/cssref/pr_padding-bottom.asp
mehdi.loa

21

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

La soluzione precedente utilizza le unità viewport e flexbox ed è quindi IE10 +, fornendo la vecchia sintassi per IE10.

Codepen con cui giocare: link to codepen

O questo, per coloro che necessitano che il contenitore principale sia scorrevole in caso di contenuto traboccante: link to codepen


main {altezza: 10px; flex: 1; overflow: auto}
Naeem Baghi

2
Dopo aver perso ore e testato diversi approcci, questo è stato il migliore! È conciso, semplice e intelligente.
marciowb,

19

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

In questo modo, non ho bisogno di giocare con il display o il posizionamento. Questo è stato utile quando ho usato Bootstrap per creare una dashboard in cui avevo una barra laterale e una principale. 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: fare clic per visualizzare il collegamento


14
Ma 100vh suona come tutta l'altezza, non l'altezza rimanente. E se hai un colpo di testa e vuoi riempire il resto
Epirocks,

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 sani, puoi mettere il div "header" prima del contenuto, come fratello, e lo stesso CSS funzionerà. Tuttavia, IE7- non interpreta correttamente l'altezza se il float è del 100% in quel caso, quindi l'intestazione deve essere IN nel contenuto, come sopra. L'overflow: auto causerà doppie barre di scorrimento su IE (che ha sempre la barra di scorrimento del viewport visibile, ma disabilitata), ma senza di essa, il contenuto verrà clip se trabocca.


Vicino! Quasi quello che voglio, tranne che avrò altre cose posizionate nel div... cioè top: 0;inserirò qualcosa proprio sotto l'intestazione. Modificherò di nuovo la mia domanda, perché hai risposto perfettamente, e ancora non quello che voglio! Nasconderò l'overflow poiché il contenuto deve adattarsi.
Vincent McNabb,

-1: Questa risposta crea un div chiamato contenuto che copre l'intero schermo, non il resto dello schermo
Casebash

11

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

Dato che è facile rendere il contenuto DIV della stessa altezza del genitore ma apparentemente difficile renderlo l'altezza del 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'imbottitura per la parte superiore che ha l'altezza dell'intestazione. In questo modo il contenuto viene visualizzato in modo ordinato 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%;
}

15
Cosa succede se non si conosce l'altezza dell'intestazione?
Yugal Jindle

11

Se è possibile gestire il mancato supporto dei browser precedenti (ovvero MSIE 9 o precedenti), è possibile farlo con il modulo di layout box flessibile che è già W3C CR. Quel modulo consente anche altri trucchi interessanti, come riordinare i contenuti.

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

Un'altra scelta sarebbe il layout griglia CSS ma che ha ancora meno supporto da versioni stabili di browser. In pratica, solo MSIE 10 supporta questo.

Aggiornamento anno 2020 : tutti i browser moderni supportano sia display: flexe display: grid. L'unico elemento mancante è il supporto per il subgridquale è supportato solo da Firefox. Nota che MSIE non supporta né le specifiche, ma se sei disposto ad aggiungere hack CSS specifici di MSIE, può essere fatto per comportarsi. Suggerirei semplicemente di ignorare MSIE perché anche Microsoft afferma che non dovrebbe più essere utilizzato.


10

Soluzione griglia CSS

Definendo solo la proprietà bodywith display:gride grid-template-rowsusing autoe 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>

Una guida completa a Grids @ CSS-Tricks.com


9

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

Darti html e body (in quell'ordine) un'altezza e poi dare un'altezza ai tuoi elementi?

Per me va bene


Il fatto è che se un utente utilizza un grande schermo per rivedere questa pagina e l'altezza dell'intestazione è fissata esattamente a 100 px, che è inferiore al 40% dell'altezza attuale, ci sarà un grande spazio vuoto tra l'intestazione e il contesto del corpo.
Saorikido,

8

Puoi effettivamente utilizzare display: tableper 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, nonché quando l'area è semplicemente il contenuto di un altro elemento posizionato con positionset su relative, absoluteo fixed. Funzionerà finché l'elemento genitore ha 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>

2
Una buona risposta, che ho votato, ma sfortunatamente, non funziona con IE8, che rimarrà ancora per molto tempo a venire.
Vincent McNabb,

Applicazioni come Gmail utilizzano Javascript per il dimensionamento, che è comunque una soluzione migliore rispetto ai CSS nella maggior parte dei casi.
Vincent McNabb,

Penso che stiano usando Javascript perché non esiste un'altra buona soluzione CSS cross-browser, non perché sia ​​migliore.
Greg,

1
@VincentMcNabb Funziona in IE8 w3schools.com/cssref/pr_class_display.asp . Richiede solo la dichiarazione DOCTYPE. Non ho mai nemmeno saputo di un valore di tabella per l'attributo display. Soluzione interessante. +1
Govind Rai,

8
 style="height:100vh"

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


6

Vincent, risponderò di nuovo usando i tuoi nuovi requisiti. Poiché non ti interessa che il contenuto venga nascosto se è troppo lungo, non è necessario spostare l'intestazione. Basta mettere l'overflow nascosto sui tag html e body e impostare l' #contentaltezza al 100%. Il contenuto sarà sempre più lungo del viewport dall'altezza dell'intestazione, ma sarà nascosto e non causerà barre di scorrimento.

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

Già pensato a questo. Ma non funziona neanche. Ho intenzione di rimanere con un tableperché funziona. Grazie comunque per l'aggiornamento.
Vincent McNabb,

5

Prova questo

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

4

Ho trovato una soluzione abbastanza semplice, perché per me era solo un problema di progettazione. Volevo che il resto della Pagina non fosse bianco sotto il piè di pagina rosso. Quindi ho impostato il colore di sfondo delle pagine su rosso. E il contenuto si colora di bianco. Con l'altezza del contenuto impostata su es. 20em o 50% una pagina quasi vuota non lascerà l'intera pagina in rosso.


4

Ho avuto lo stesso problema ma non sono riuscito a far funzionare la soluzione con i flexbox sopra. Quindi 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 i flexbox ma in un modo più semplice, usando solo le proprietà display: flex e flex-direction: row | column :

Uso angolare e desidero che le dimensioni dei miei componenti siano al 100% dell'elemento principale.

La chiave è impostare la dimensione (in percentuale) per tutti i genitori in ordine per limitarne la dimensione. Nel seguente esempio l'altezza di myapp ha il 100% della finestra.

Il componente principale ha il 90% della finestra, 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>

4

Per le app mobili utilizzo 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
Questa non è la soluzione giusta. vh è incoerente nei browser mobili. Vedi qui per maggiori dettagli: stackoverflow.com/questions/37112218/...
HarshMarshmallow

3

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

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

Usa semplicemente l'altezza minima (anziché l'altezza) con calc () nel blocco di contenuto.

Calc () inizia con il 100% e sottrae le altezze di intestazioni e piè di pagina (è necessario includere valori di riempimento)

L'uso di "altezza minima" anziché di "altezza" è particolarmente utile in modo che possa funzionare con contenuti renderizzati javascript e framework JS come Angular2. Altrimenti, il calcolo non spingerà il piè di pagina in fondo alla pagina una volta che il contenuto renderizzato javascript è visibile.

Ecco un semplice esempio di intestazione e piè di pagina con altezza 50px e imbottitura 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 hai l'idea ...


3

In Bootstrap:

Stili CSS:

html, body {
    height: 100%;
}

1) Basta riempire l'altezza dello spazio sullo schermo rimanente:

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

! [inserisci la descrizione dell'immagine qui


2) riempire l'altezza dello spazio sullo schermo rimanente e allineare il contenuto al centro dell'elemento genitore:

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

! [inserisci la descrizione dell'immagine qui


1

Questa è la mia versione minima della soluzione di Pebbl. Impiegato un'eternità per trovare il trucco per farlo funzionare in IE11. (Testato anche su Chrome, Firefox, Edge e 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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.