Как прижать дочерний блок к низу родительского?
В верстке есть такой блок, фиксированной высоты, в него вложены ещё три блока, верхний и нижний — фиксированной высоты, тот, что посередине — нет. Не могу понять, как прижать нижний блок к низу родительского.
Отслеживать
5,970 4 4 золотых знака 23 23 серебряных знака 44 44 бронзовых знака
задан 2 сен 2012 в 8:07
3,197 7 7 золотых знаков 47 47 серебряных знаков 95 95 бронзовых знаков
Возможный дубликат вопроса: Как всегда прижимать footer к низу экрана?
– user232857
3 апр 2017 в 21:51
5 ответов 5
Сортировка: Сброс на вариант по умолчанию
У дочернего в стилях пишите:
position: absolute; bottom: 0px; Отслеживать
ответ дан 2 сен 2012 в 8:15
4,966 10 10 золотых знаков 35 35 серебряных знаков 62 62 бронзовых знака
position:relative; padding-bottom:50px; position:absolute; bottom:0; Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
ответ дан 2 сен 2012 в 19:50
854 4 4 серебряных знака 8 8 бронзовых знаков
Хм. Если размеры вам известны, то тут чистая математика. Если только средствами CSS, то можно, например, так сделать:
* < margin: 0; padding: 0; >#wrapper < width: 400px; height: 600px; border: 1px solid #900; overflow: hidden; text-shadow: 1px 1px 1px #FFFFFF; >#top < background: #999; height: 70px; text-align: center; line-height: 70px; >#center < background: #CCC; >#bottom < position: absolute; width: 400px; top: 551px; background: #999; height: 50px; text-align: center; line-height: 50px; >p
TOP Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
BOTTOM Если размеры не известны изначально, то тут в помощь JS/jQuery.
Как прижать DIV к низу родителя без position: absolute и bottom: 0?
Подскажите, пожалуйста, кто знает — как избежать абсолютного позиционирования и прижать DIV к низу страницы при этом сделать так чтобы на узких экранах появлялась полоса прокрутки?
Проблема в том, что на узких экранах DIV с position: absolute перекрывает верхний контент, я пытался установить min-height у родительского DIV и даже у BODY, но это не помогает.
- Вопрос задан более трёх лет назад
- 16973 просмотра
Как прижать элемент к низу блока CSS
Если вы хотите прижать элемент к низу блока, вы можете использовать свойство CSS position и bottom . Например:
.container < position: relative; height: 300px; >.element
В этом примере, .container имеет высоту 300 пикселей и позиционируется относительно. .element имеет абсолютную позицию и устанавливает свойство bottom на 0, чтобы прижаться к нижней части .container . Если вы хотите, чтобы элемент был прижат к нижней части окна браузера, вы можете использовать position: fixed вместо position: absolute . Например:
Прижать элемент к низу родительского без позиционирования
Как прижать элемент к правому нижнему углу родительского не используя position(top, left. тоже нельзя)?
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Прижать див к низу родительского дива
Внизу страницы имеется якорь "наверх страницы", он положен в отдельный див. Слева страницы.
Прижать дочерний див к низу родительского
В верстке есть родительский див, фиксированной высоты. В него сложены три дива, верхний и нижний -.
Прижать элемент к низу родителя
подскажите, как. <div style="width:200px; height:500px; border:1px solid green;">aaaa<br /> .
Регистрация: 12.07.2009
Сообщений: 361
margin, padding в помощь.
Регистрация: 20.04.2013
Сообщений: 283
а кроме? препод сказал 2 способа минимум есть, используя только html css. И сказал найти их
119 / 116 / 63
Регистрация: 16.09.2016
Сообщений: 354
vertical-align:bottom + float:right;
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
Сообщение было отмечено Fedor92 как решение
Решение
1 2 3 4 5 6 7 8 9 10 11 12 13
.wrapper{ width:200px; height: 200px; background-color:#ccc; display:flex; flex-direction: row-reverse; align-items: flex-end; } .block{ width: 50px; height: 50px; background-color:#eee; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14
.wrapper{ width:200px; height: 200px; background-color:#ccc; line-height:200px; text-align:right; } .block{ width: 50px; height: 50px; background-color:#eee; display: inline-block; vertical-align:bottom; }
1 2 3
div class="wrapper"> div class="block">/div> /div>
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Как прижать блок к низу блока, без абсолют и flex?
Как прижать блок к низу блока, без абсолют и flex?
Прижать к низу экрана
Пробую найти ответ, но не знаю как правильно записать в поиске. Мне нужно что бы блок был прижат к.
Прижать футер к низу
Всем привет, помогите прижать футер к низу подвала, смотрел я разные технику пробую но всё равно не.
Прижать футер к низу
В общем не удаётся прижать футер к низу страницы. Похожие темы и ресурсы изучил, но не помогает. .
Или воспользуйтесь поиском по форуму: