Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ola pessoal.
Bem, to ollhando o forum desde ontem a noite, e ainda não consegui arrumar isso.
quero fazer um layout liquid (eu acho) que se ajuste verticalmente.
bem, ja tentei de tudo, tudo mesmo.
tenho o seguinte layout.
<body>
<div id="site">
<div id="topo">topo</div>
<div id="meio">MEIO</div>
<div id="rodape">rodape</div>
</div>
</body>
Bem, a maneira que mais cheguei perto do que eu quero, é fazer o meio ter 100%, colocar padding-top=height(topo) e padding-bottom=height(rodape)
assim, o meio vai ter 100% realmente, mas só vai aparecer depois do topo, e antes do rodape =)
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
text-align: center;
}
#site {
margin: auto;
text-align: left;
width: 994px;
height: 100%;
z-index: 1;
}
#topo {
position: absolute;
top: 0;
height: 144px;
width: 994px;
background-color: #FF0000;
z-index: 3;
}
#meio {
position: relative;
padding-top: 144px;
padding-bottom: 31px;
background-color: #00FF00;
height: 100%;
width: 994px;
z-index: 2;
}
#rodape {
position: absolute;
bottom: 0px;
height: 31px;
width: 994px;
background-color: #0000FF;
z-index: 4;
}
</style>
beleza, IE funciona, apesar de ser gambiarra (IE só funciona gambiarra ^^) mas no FF não funciona, claro, pq ele vai somar o rodape + topo.
Bem, alguem tem alguma solução pra isso? pq no forum, todas as soluções não chegam a lugar algum =)))
[]'s
Carregando comentários...