C'è un modo per impostare un layout in modo che l'intestazione sia 50px, il corpo è 100% e il piè di pagina è 50px?come rendere 100% DIV altezza tra intestazione e piè di pagina
Vorrei che il corpo utilizzasse l'intera area di visualizzazione al minimo. Mi piacerebbe avere il piè di pagina e l'intestazione di essere sullo schermo in ogni momento
ho creato un esempio in jsfiddle:
AGGIORNATO JsFiddle: http://jsfiddle.net/5V288/1025/
HTML:
<body>
<div id="header"></div>
<div id="content"><div>
Content
</div></div>
<div id="footer"></div>
</body>
CSS :
html { height: 100%; }
body {
height:100%;
min-height: 100%;
background: #000000;
color: #FFFFFF;
position:relative;
}
#header {
height:50px;
width:100%;
top:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#footer {
height:50px;
width:100%;
bottom:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:100%;
padding: 0 20px;
}
#content > div {
padding: 70px 0;
}
Senza riquadro di bordo, il contenuto sarà hei imbottitura 100% + 140 px. Con la border box l'altezza del contenuto sarà al 100% e il padding sarà all'interno.
Sarebbe bello [includere del codice qui] (http://stackoverflow.com/a/12907900/1269037) nel caso in cui JSFiddle non sia disponibile. A proposito, il 'dimensionamento della scatola: border-box;' non sembra fare alcuna differenza. –
Senza riquadro di bordo il contenuto sarà altezza 100% + 140 px di riempimento. Con la border box l'altezza del contenuto sarà al 100% e il padding sarà all'interno. – WolvDev
Non funziona quando si scorre, il piè di pagina scorre con il contenuto. – Roaders
Solo una correzione per soluzione Andreas Inverno:
* Con la soluzione di esso, si avrebbe problemi se il contenuto è maggiore l'area della finestra disponibile.
Grazie per questo - ho avuto problemi con intestazione e piè di pagina fissi con area centrale scorrevole al 100%. Questo è perfetto, ora può avere layout EPIC !!!^__^ – Jason
yayyyyyyy, sono felice di aiutarti: 3 –
Penso che quello che stai cercando sia "più coordinate assolute". A List Apart una spiegazione here ma in fondo, è solo bisogno di specificare la posizione del corpo come assoluto, e impostare sia top: 50px e bottom: 50px:
<body>
<style>
#header {
position: absolute;
height: 50px;
}
#body {
position: absolute;
top: 50px;
bottom: 50px;
background-color: yellow;
}
#footer {
position:absolute;
height: 50px;
bottom: 0;
}
</style>
<div id="header">Header</div>
<div id="body">Content goes here</div>
<div id="footer">Footer</div>
http://www.spookandpuff.com/examples/absoluteCoordinates.html mostra la tecnica in maniera più bella.
http://stackoverflow.com/questions/6158975/css-100-height-layout – Samich
Quale comportamento si vorrebbe se il contenuto nel corpo fosse in overflow dell'altezza dello schermo? – bendataclear