3kLiN
05-11-2006, 23:10
вот в очередной раз упёрся в эту проблему.
задача стандартная: хедер, основная часть плавающего размера, футер. всё это нужно организовать для всей тройки браузеров и только на divах.
порыскав по интернету, нашёл решение: расположить футер в padding-bottom основной части.
имею css:
html, body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#content
{
position: relative;
min-height: 100%;
padding-bottom: 50px;
}
#footer
{
position: relative;
margin-top: -50px;
height: 50px;
}
и html:
<div id="content">
<!-- здесь хедер и основной контент произвольной длины -->
</div>
<div id="footer"> ... </div>
и всё бы ничего, да вот опера вообще не дружит с min-height, да и в ie оно, как я понял, реализовано пока не очень. а если заменить min-height на height, то опера начинает делать то, что нужно. но теперь firefox не с нами, тк он при overflow контентного блока оставляет футер на том же, а не смещает вниз.
как посоветуете грамотно решить задачу?
задача стандартная: хедер, основная часть плавающего размера, футер. всё это нужно организовать для всей тройки браузеров и только на divах.
порыскав по интернету, нашёл решение: расположить футер в padding-bottom основной части.
имею css:
html, body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#content
{
position: relative;
min-height: 100%;
padding-bottom: 50px;
}
#footer
{
position: relative;
margin-top: -50px;
height: 50px;
}
и html:
<div id="content">
<!-- здесь хедер и основной контент произвольной длины -->
</div>
<div id="footer"> ... </div>
и всё бы ничего, да вот опера вообще не дружит с min-height, да и в ie оно, как я понял, реализовано пока не очень. а если заменить min-height на height, то опера начинает делать то, что нужно. но теперь firefox не с нами, тк он при overflow контентного блока оставляет футер на том же, а не смещает вниз.
как посоветуете грамотно решить задачу?