Eu tenho um layout de página em que eu tenho um fixed cabeçalho que pode ter qualquer altura e um rodapéposicionado na parte inferior da página. Eu estou procurando uma solução de CSS para que o conteúdo div preenche o espaço restante (verticalmente). No jsfiddle abaixo eu tentei fazer isso, mas como você pode ver o conteúdo está por trás do rodapé.
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%;
}
Isso é possível com css puro (3)?
Respostas:
1 para resposta № 1É um pouco uma solução feia, mas se você fizer o top de margem do conteúdo div como -54px e adicionar um div dentro dele com padding-top: 54px, ele funcionará como esperado.
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 para resposta № 2
Aqui uma abordagem diferente:
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;
}
Agora o rodapé está sempre na parte inferior, enquanto o conteúdo não preenche a página do furo. Nesse caso, o elemento "push" fornece espaço suficiente para negar a sobreposição de rodapé e conteúdo.
Seu conteúdo é agora colocado sob o rodapé através do preenchimento. A altura é na verdade 0 devido a falta de conteúdo. Na minha abordagem, o conteúdo div ajusta sempre o conteúdo inserido.
Tenha em mente que a) para propósito responsivo vocêtinha que saber sobre a altura do cabeçalho e ajustar o preenchimento da seção usando consultas de mídia b) o mesmo para o rodapé. Ajuste a altura do elemento de pressão e ajuste o valor da margem inferior.
0 para resposta № 3
Tente posicionar o content estar bem acima do rodapé
bottom: <footer-height>;
position: absolute;
0 para a resposta № 4
Eu fiz rodapé pegajoso usando isso tutorial. Eu acho que é fácil e conveniente de usar.
CÓDIGO 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%;
}
CÓDIGO HTML
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>