it-swarm.it

Come può un elemento html riempire il 100% dell'altezza residua dello schermo, usando solo i CSS?

Ho un elemento di intestazione e un elemento di contenuto:

#header
#content

Voglio che l'intestazione abbia un'altezza fissa e che il contenuto riempia tutta l'altezza rimanente disponibile sullo schermo, con overflow-y: scroll;.

È possibile senza Javascript?

91
Harry

Il trucco è specificare l'altezza del 100% sugli elementi html e body. Alcuni browser guardano agli elementi principali (html, body) per calcolare l'altezza.

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}
75
BentOnCoding

dimentica tutte le risposte, questa linea di CSS ha funzionato per me in 2 secondi:

height:100vh;

1vh = 1% dell'altezza dello schermo del browser

fonte

Per un ridimensionamento del layout reattivo, potresti voler utilizzare:

min-height: 100vh

[aggiorna novembre 2018] Come menzionato nei commenti, l'uso dell'altezza minima potrebbe evitare di avere problemi con i progetti rispondenti

[aggiorna aprile 2018] Come menzionato nei commenti, nel 2011, quando è stata posta la domanda, non tutti i browser supportano le unità viewport. Le altre risposte erano le soluzioni allora: vmax non è ancora supportato in IE, quindi questa potrebbe non essere la soluzione migliore per tutti.

259
Sebastien H.

In realtà l'approccio migliore è questo:

html { 
    height:100%;
}
body { 
    min-height:100%;
}

Questo risolve tutto per me e mi aiuta a controllare il mio piè di pagina e può avere il piè di pagina fisso, indipendentemente dal fatto che la pagina venga spostata verso il basso.

Soluzione tecnica - EDITED

Storicamente, "altezza" è una cosa difficile da modellare, rispetto a "larghezza", la più semplice. Dal momento che css si concentra su <body> affinché lo stile funzioni. Il codice sopra - abbiamo dato un'altezza a <html> e <body>. È qui che entra in gioco la magia: dato che abbiamo "altezza minima" sul tavolo da gioco, stiamo dicendo al browser che <body> è superiore a <html> perché <body> contiene l'altezza minima. Questo a sua volta, consente a <body> di sovrascrivere <html> perché <html> aveva altezza già prima. In altre parole, stiamo ingannando il browser per "eliminare" <html> dal tavolo, in modo da poterlo definire in modo indipendente.

32
Faron

La soluzione accettata non funzionerà effettivamente. Noterai che il contenuto div sarà uguale all'altezza del suo genitore, body. Quindi l'impostazione dell'altezza body su 100% lo imposterà uguale all'altezza della finestra del browser. Supponiamo che la finestra del browser fosse 768px in altezza, impostando il contenuto div height su 100%, l'altezza di div sarà a sua volta 768px. Quindi, finirai con il div dell'intestazione 150px e il div del contenuto che è 768px. Alla fine avrai contenuto 150px sotto la parte inferiore della pagina. Per un'altra soluzione, controlla questo link.

8
dykstrad

Con HTML5 puoi farlo:

CSS:

body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}

HTML:

<header>blabablalba </header>
<section> Content </section>
6
Miguel

È possibile utilizzare VH nella proprietà altezza minima.

min-height: 100vh;

Puoi fare come segue, a seconda di come stai usando i margini ...

min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element
4

Per me, il prossimo ha funzionato bene:

Ho spostato l'intestazione e il contenuto su un div

<div class="main-wrapper">
    <div class="header">

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

    </div>
</div>

Ho usato questo riferimento per riempire l'altezza con flexbox. Il CSS va così:

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.header {
    flex: 1;
}
.content {
    flex: 1;
}

Per ulteriori informazioni sulla tecnica flexbox, visitare riferimento

3
hasher

In questo caso voglio che il mio div contenuto principale sia l'altezza del liquido in modo che l'intera pagina occupi il 100% dell'altezza del browser.

height: 100vh;

1
Fezal halai

Puoi anche impostare il genitore su display: inline. Vedi http://codepen.io/tommymarshall/pen/cECyH

Assicurati di avere anche l'altezza di html e body impostati al 100%.

1
tommymarshall

La risposta accettata non funziona. E la risposta più votata non risponde alla domanda reale. Con un'intestazione di altezza pixel fissa e un riempimento nella restante visualizzazione del browser e scorrere fino a flusso di flusso. Ecco una soluzione che funziona davvero, usando il posizionamento assoluto. Suppongo anche che l'altezza dell'intestazione sia nota, dal suono di "intestazione fissa" nella domanda. Uso 150px come esempio qui:

HTML:

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">      
        </div>
    </body>
</html>

CSS: (aggiunta di colore di sfondo solo per effetti visivi)

#Header
{
    height: 150px;
    width: 100%;
    background-color: #ddd;
}
#Content
{
   position: absolute;
   width: 100%;
   top: 150px;
   bottom: 0;
   background-color: #aaa;
   overflow-y: scroll;
}

Per uno sguardo più dettagliato su come funziona, con il contenuto effettivo all'interno di #Content, dai un'occhiata a questo jsfiddle , usando bootstrap righe e colonne.

1
KjetilNordin

Molto semplice:

#content {
    max-height: 100%;
}
0
Masood Aslami

CSS PLaY | intestazione/piè di pagina fissi per browser/layout a colonna singola centrata

Frame CSS, versione 2: Esempio 2, larghezza specificata | 456 Berea Street

Una cosa importante è che sebbene sembri facile, ci sarà un po 'di brutto codice che va nel tuo file CSS per ottenere un effetto come questo. Sfortunatamente, è davvero l'unica opzione.

0
Joe

A meno che non sia necessario supportare IE 9 e versioni precedenti, utilizzare Flexbox

body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }

È inoltre necessario ottenere body per riempire l'intera pagina

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