Xpoint
   [напомнить пароль]

как расположить элемент внизу основного блока

Метки: [без меток]
2007-06-08 23:01:52 [обр] michel[досье]
не хочу пользоваться таблицами. верстка только на div.
проблема - не могу расположить текст (copyright) внизу контейнера.
свойство vertical-align:bottom не помогает
высота блока не известна, так что свойство margin-top: также не спасает, как и позиционирование относительно верхнего блока.
спустя 40 минут [обр] Джафаров Эльдар(0/6)[досье]

{
position:absolute;
bottom:0px;
}

попробуте так

спустя 11 часов [обр] michel[досье]
Джафаров Эльдар[досье]не работает так, пробовал. и top:100% тоже
спустя 1 час 20 минут [обр] Евгений Петров(206/1055)[досье]
michel[досье] vertical-align:bottom; не будет работать для блоков. Чтобы понять, что можно сделать, нужен минимальный код вашей конструкции.
И еще - если неизвестна высота такого блока, как можно учесть то, что остальной контент должен отступать внизу на высоту этого блока?
спустя 4 дня [обр] Власов Александр[досье]
На мой взгляд самый правильный способ задание футера (position: absolute; bottom: 0; отпадает сразу, так как в IE есть баг с округлением и футер будет прыгать вверх на 1px при изменении размера окна):
<html>
<style>
html, body {height: 100%; margin: 0; padding: 0;}
#content {min-height: 100%; -height: 100%;}
.content {padding-bottom: 100px;}
#bottom {margin-top: -100px; height: 100px; background: red;}
</style>

<body>

<div id="content">
<div class="content">
   content<br>
   content last<br>
</div>
</div>

<div id="bottom">
   footer
</div>

</body>
</html>
спустя 2 минуты [обр] Власов Александр[досье]
сорри, не прочитал последнее условие :)
спустя 15 часов [обр] Власов Александр[досье]
вот так можно, но это изобретение велосипеда и искуственная замена таблиц..
<html>
<style>
html, body {height: 100%; margin: 0; padding: 0;}

body {display: table; width: 100%;}

#content {display: table-row; min-height: 100%; height: 100%;}
#bottom {display: table-row;}
#bottom {background: red; //margin-top: expression( this.offsetHeight * (-1) ); }
.content {//padding-bottom: expression( document.getElementById('bottom').offsetHeight );}
</style>

<body>

<div id="content">
<div class="content">
   content<br>
   content last<br>
</div>
</div>

<div id="bottom">
   footerasdasasas<BR/>asd
</div>


</body>
</html>
спустя 5 дней [обр] michel[досье]
Власов Александр[досье] разобрался вроде. вашим способом не пользовался. в след. раз. спасибо.
Powered by POEM™ Engine Copyright © 2002-2005