Risposte:
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;
}dimentica tutte le risposte, questa riga di CSS ha funzionato per me in 2 secondi:
height:100vh;1vh = 1% dell'altezza dello schermo del browser
Per ridimensionare il layout reattivo, potresti voler utilizzare:
min-height: 100vh[aggiornamento novembre 2018] Come menzionato nei commenti, l'utilizzo dell'altezza minima potrebbe evitare problemi con i progetti che rispondono
[aggiornamento aprile 2018] Come accennato nei commenti, nel 2011, quando è stata posta la domanda, non tutti i browser supportavano le unità di visualizzazione. Le altre risposte erano le soluzioni all'epoca: non vmaxè ancora supportata in IE, quindi questa potrebbe non essere ancora la soluzione migliore per tutti.
min-height: 100vhsarebbe molto meglio. Sarebbe scalabile anche per progetti reattivi.
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 dallo scorrimento della pagina verso il basso.
Soluzione tecnica - MODIFICATA
Storicamente, l '"altezza" è una cosa difficile da modellare, rispetto alla "larghezza", la più semplice. Dal momento che css si concentra sullo <body>styling per funzionare. Il codice sopra - abbiamo dato <html>e <body>un'altezza. È qui che entra in gioco la magia: poiché abbiamo "altezza minima" sul tavolo da gioco, stiamo dicendo al browser che <body>è superiore rispetto a <html>perché <body>contiene l'altezza minima. Questo a sua volta, consente <body>di sovrascrivere <html>perché <html>aveva l'altezza già in precedenza. In altre parole, stiamo inducendo il browser a "saltare" <html>fuori dal tavolo, in modo da poter applicare lo stile in modo indipendente.
min-heighte height?
<body>styling per funzionare. Questo codice: abbiamo dato <html>e <body>un'altezza. È qui che entra in gioco la magia: dal momento che abbiamo "altezza minima" sul tavolo da gioco, stiamo dicendo al server che <body>è superiore <html>perché <body>contiene l'altezza minima. Questo a sua volta, consente <body>di sovrascrivere <html>perché <html>aveva l'altezza già in precedenza. In altre parole, stiamo inducendo il server a "saltare" <html>fuori dal tavolo, in modo da poterlo stile in modo indipendente.
È possibile utilizzare vh sulla proprietà min-height.
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 elementLa soluzione accettata non funzionerà effettivamente. Si noterà che il contenuto divsarà uguale all'altezza del suo genitore, body. Quindi impostando l' bodyaltezza su 100%verrà impostata uguale all'altezza della finestra del browser. Supponiamo che la finestra del browser fosse 768pxin altezza, impostando l' divaltezza del contenuto su 100%, l' divaltezza di sarà a sua volta 768px. Quindi, ti ritroverai con il div dell'intestazione 150pxe il div del contenuto 768px. Alla fine avrai dei contenuti 150pxsotto il fondo della pagina. Per un'altra soluzione, controlla questo collegamento.
Con HTML5 puoi fare questo:
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>Per me, il prossimo ha funzionato bene:
Ho inserito l'intestazione e il contenuto in 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 funziona così:
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 1;
}
.content {
flex: 1;
}Per maggiori informazioni sulla tecnica flexbox, visita il riferimento
Puoi anche impostare il genitore su display: inline. Vedere http://codepen.io/tommymarshall/pen/cECyH
Assicurati di avere anche l'altezza di html e body impostati al 100%.
La risposta accettata non funziona. E la risposta con il voto più alto non risponde alla domanda effettiva. Con un'intestazione di altezza in pixel fissa e un riempimento nella visualizzazione rimanente del browser e scorrere per owerflow. Ecco una soluzione che funziona davvero, utilizzando il posizionamento assoluto. Presumo 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 del colore di sfondo solo per l'effetto visivo)
#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 righe e colonne di bootstrap.
bottomstruttura si è assicurata che i #Contentrimangano bloccati alla fine della pagina. Apprezzo che tu abbia dedicato del tempo per spiegarlo.
In questo caso, voglio che il mio div contenuto principale sia altezza liquida in modo che l'intera pagina occupi il 100% dell'altezza del browser.
height: 100vh;
Per favore lasciami aggiungere i miei 5 centesimi qui e offri una soluzione classica:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>Funzionerà con tutti i browser, senza script, senza flessibilità. Apri snippet in modalità a pagina intera e ridimensiona il browser: le proporzioni desiderate vengono mantenute anche in modalità a schermo intero.
idHeader.heighte idContent.topvengono regolati per includere il bordo e dovrebbero avere lo stesso valore se il bordo non viene utilizzato. Altrimenti gli elementi verranno estratti dalla finestra, poiché la larghezza calcolata non include il bordo, il margine e / o il riempimento.left:0; right:0; può essere sostituito da width:100% per lo stesso motivo, se non viene utilizzato alcun bordo.padding-tope / o
padding-bottomattributi #idOuterall'elemento.Per completare la mia risposta, ecco il layout del piè di pagina:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idContent" style="bottom:36px; top:0;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>Ed ecco il layout con intestazione e piè di pagina:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:36px;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>A meno che non sia necessario supportare IE 9 e versioni precedenti, utilizzerei flexbox
body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }È inoltre necessario che il corpo riempia l'intera pagina
body, html{ width:100%; height:100%; padding: 0; margin: 0;}Frame CSS, versione 2: esempio 2, larghezza specificata | 456 Berea Street
Una cosa importante è che, sebbene questo sembri facile, ci sarà un bel po 'di codice brutto nel tuo file CSS per ottenere un effetto come questo. Sfortunatamente, è davvero l'unica opzione.
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}La soluzione migliore che ho trovato finora è impostare un elemento piè di pagina nella parte inferiore della pagina e quindi valutare la differenza tra l'offset del piè di pagina e l'elemento che dobbiamo espandere. per esempio
<div id="contents"></div>
<div id="footer"></div>#footer {
position: fixed;
bottom: 0;
width: 100%;
}var contents = $('#contents');
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');Potresti anche aggiornare l'altezza dell'elemento del contenuto su ogni ridimensionamento della finestra, quindi ...
$(window).on('resize', function() {
contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});Hai provato qualcosa di simile?
CSS:
.content {
height: 100%;
display: block;
}HTML:
<div class=".content">
<!-- Content goes here -->
</div>