Mam układ strony, w którym mam fixed nagłówek, który może mieć dowolną wysokość i stopkęumieszczony na dole strony. Szukam rozwiązania css, aby div content wypełniał pozostałą przestrzeń (pionowo). W jsfiddle poniżej próbowałem to zrobić, ale jak widać zawartość jest za stopką.
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%;
}
Czy jest to możliwe dzięki czystemu css (3)?
Odpowiedzi:
1 dla odpowiedzi № 1Jest to trochę brzydkie rozwiązanie, ale jeśli uczynisz margines na górze zawartości div -54px i dodasz do niego div z dopełnieniem-top: 54px, działa to zgodnie z oczekiwaniami.
HTML:
<div class="content"><div class="contentwrapper"></div><div>
CSS:
.contentwrapper {
padding-top:54px;
}
.content{
background-color: #000;
height: 100%;
margin-top:-54px;
}
Skrzypce: http://jsfiddle.net/dohqn8m4/1/
1 dla odpowiedzi nr 2
Oto inne podejście:
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;
}
Teraz stopka jest zawsze na dole, tak długo, jak treść nie wypełnia strony otworu. W tym przypadku element „push” zapewnia wystarczającą ilość miejsca, aby zaprzeczyć nakładaniu się stopki i zawartości.
Twoja zawartość jest teraz umieszczona pod stopką przez dopełnienie. Wysokość jest w rzeczywistości 0 z powodu braku treści. W moim podejściu div content zawsze pasuje do wstawionej treści.
Weź pod uwagę, że a) w celu szybkiego reagowaniamusiał wiedzieć o wysokości nagłówka i dostosować dopełnienie sekcji za pomocą zapytań o media b) to samo dla stopki. Dostosuj wysokość elementu wypychającego i dostosuj wartość dolnego marginesu.
0 dla odpowiedzi № 3
Spróbuj ustawić content być tuż nad stopką
bottom: <footer-height>;
position: absolute;
0 dla odpowiedzi nr 4
Użyłem tej lepkiej stopki seminarium. Myślę, że jest łatwy i wygodny w użyciu.
CSS CODE
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%;
}
KOD HTML
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>