Ho un layout di pagina in cui ho un fixed intestazione che può avere qualsiasi altezza e un piè di paginaposizionato nella parte inferiore della pagina. Sto cercando una soluzione css in modo che il contenuto div riempa lo spazio rimanente (verticalmente). Nel jsfiddle qui sotto ho provato a farlo, ma come puoi vedere il contenuto è dietro il piè di pagina.
HTML:
<main>
<header>
<ol>
<li>bar</li>
<li>foo</li>
</ol>
</header>
<section>
<div class="content"><div>
</section>
<footer></footer>
</main>
CSS:
header {
background-color: #abc;
z-index: 1000;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
}
html, body, main, section {
height: 100%;
display: block;
}
.content{
background-color: #000;
height: 100%;
}
footer {
background-color: #def;
bottom: 0;
display: block;
height: 54px;
position: absolute;
width: 100%;
}
Questo è possibile con puro css (3)?
risposte:
1 per risposta № 1È una soluzione un po 'brutta, ma se si crea il margine superiore del div del contenuto come -54px e si aggiunge un div al suo interno con padding-top: 54px, funziona come previsto.
HTML:
<div class="content"><div class="contentwrapper"></div><div>
CSS:
.contentwrapper {
padding-top:54px;
}
.content{
background-color: #000;
height: 100%;
margin-top:-54px;
}
Violino: http://jsfiddle.net/dohqn8m4/1/
1 per risposta № 2
Ecco un approccio diffrente:
HTML:
<header>
<ol>
<li>bar</li>
<li>foo</li>
</ol>
</header>
<main>
<section>
<div class="content"></div>
</section>
<div class="push"></div>
</main>
<footer></footer>
CSS:
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
border: 0;
}
header {
background-color: #abc;
z-index: 1000;
position: fixed;
top: 0;
right: 0;
left: 0;
}
main {
min-height: 100%;
height: auto !important;
margin-bottom: -54px;
}
main > section{
padding-top: 72px;
}
.content {
background-color: #000;
}
.push {
height: 54px;
}
footer {
background-color: #def;
height: 54px;
}
Ora il piè di pagina è sempre in fondo perché il contenuto non riempie la pagina del buco, in tal caso l'elemento "push" fornisce abbastanza spazio per negare la sovrapposizione di piè di pagina e contenuto.
Il contenuto div è ora posizionato sotto il piè di pagina attraverso il padding. L'altezza è in realtà 0 a causa del contenuto mancante. Nel mio approccio il contenuto div si adatta sempre al contenuto inserito.
Tieni presente che a) per scopi sensibiliha dovuto conoscere l'altezza dell'intestazione e regolare il riempimento della sezione utilizzando le query multimediali b) lo stesso per il footer. Regola l'altezza dell'elemento di spinta e regola il valore di margine inferiore.
0 per risposta № 3
Prova a posizionare il content per essere proprio sopra il piè di pagina
bottom: <footer-height>;
position: absolute;
0 per risposta № 4
Ho fatto footer sticky usando questo lezione. Penso che sia facile e conveniente da usare.
CODICE CSS
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
CODICE HTML
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>