Div внизу страницы со скроллингом

155
23 марта 2017, 18:38

Всем привет!

К примеру, имеется страница высотой 2000px. При размере окна браузера 900px, т.е. появляется скролл по оси y, создается div объект с position:absolute;. Как разместить его в самом низу страницы? (bottom:0; размещает объект внизу размера окна браузера, а не истинного размера страницы). Есть идея, используя js, рассчитать высоту всей страницы и указать для блока top: (высота документа) - (высота объекта), однако мне кажется все можно сделать не используя js на css, подскажите пожалуйста.

Answer 1

Для объекта высотой 2000 задайте position: relative; тогда координаты дочерних объектов будут рассчитаны относительно него

.page{ 
   height:2000px; 
   position: relative; 
} 
.absolute{ 
    position:absolute; 
    bottom:0; 
    border:1px solid #ccc; 
    width:100%; 
    height:100px; 
}
<div class=page> 
<div class=absolute></div> 
</div>

READ ALSO
Input для подтвержения sms-кода

Input для подтвержения sms-кода

Не могу найти примеров реализация инпута для подтверждения кода через smsВизуально выглядит так: 3 или больше инпутов, которые взаимодействуют...

157
Проблема с сложным выпадающим меню, как решить?

Проблема с сложным выпадающим меню, как решить?

Есть проект в нем сложное выпадающее меню (второй выпадающий блок по высоте выше в некоторых случаях чем первый, аналогично третий в некоторых...

156
Вопрос по формам

Вопрос по формам

При отправке формы человек попадает на страницу оплатыКак сделать так, чтобы оплата происходила в новом окне?

134
Как одолеть постоянное недовольство canvas?

Как одолеть постоянное недовольство canvas?

Нужно было выводить картинку и на ней текстЛадно, 20 минут поиска и нужны код у меня, чуть-чуть его дорабатываем, даем картинку и все, отлично

136