Имам оформление на страницата, в което имам fixed заглавие, което може да има всякаква височина и долна частв долната част на страницата. Аз "търся решение CSS, така че съдържанието div запълва останалото пространство (вертикално). В jsfiddle по-долу аз съм се опитвал да направя това, но както можете да видите съдържанието е зад долната част.
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%;
}
Възможно ли е това с чист css (3)?
Отговори:
1 за отговор № 1Това е малко грозно решение, но ако направите маржа-отгоре на съдържанието div като -54px и добавите div вътре в него с padding-top: 54px, то работи както се очаква.
HTML:
<div class="content"><div class="contentwrapper"></div><div>
CSS:
.contentwrapper {
padding-top:54px;
}
.content{
background-color: #000;
height: 100%;
margin-top:-54px;
}
Поиграйте си: http://jsfiddle.net/dohqn8m4/1/
1 за отговор № 2
Тук е различен подход:
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;
}
Сега фундаментът е винаги на дъното, докато съдържанието не запълва дупката. В този случай елементът "push" осигурява достатъчно място, за да се отрече припокриването на футера и съдържанието.
Съдържанието ви е поставено под долния колонтитул през подложката. Височината всъщност е 0 поради липсващо съдържание. В моя подход съдържанието div се вписва винаги в съдържанието.
Имайте предвид, че а) за отзивчива целтрябваше да знае за височината на главата и да коригира подложката на секцията, като използва медийни заявки б) същото за долния колонтитул. Регулирайте височината на натискащия елемент и регулирайте стойността на долната граница.
0 за отговор № 3
Опитайте да позиционирате content да се намира точно над долния колонтитул
bottom: <footer-height>;
position: absolute;
0 за отговор № 4
Направих лепкава долна част, използвайки това настойнически, Мисля, че е лесно и удобно да се използва.
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%;
}
HTML CODE
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>