Прижать элемент к низу родительского без позиционирования
Как прижать элемент к правому нижнему углу родительского не используя 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;
3824 / 2674 / 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?
Прижать к низу экрана
Пробую найти ответ, но не знаю как правильно записать в поиске. Мне нужно что бы блок был прижат к.
Прижать футер к низу
Всем привет, помогите прижать футер к низу подвала, смотрел я разные технику пробую но всё равно не.
Прижать футер к низу
В общем не удаётся прижать футер к низу страницы. Похожие темы и ресурсы изучил, но не помогает. .
Или воспользуйтесь поиском по форуму:
CSS прижать footer к низу окна браузера
Как прижать подвал сайта (footer) в самый низ окна браузера, чтобы страница при этом выглядела вытянутой на всю высоту, вне зависимости от объема текста, а при высоте страницы, большей, чем высота окна браузера (при появлении скролла), футер оставался бы на положенном ему месте.
Если с помощью таблиц данная задача решается лишь указанием высоты для таблицы и/или вложенной в нее ячейки, то при использовании CSS блочной верстке применяется совсем иной подход.
В процессе практики выделили 5 способов прижимания футера к низу окна браузера с помощью CSS.
HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):
В CSS-код, приведенный ниже, включены только те свойства, которые минимально необходимы для реализации соответствующего способа. По каждому из них вы можете посмотреть живой пример.
Первый способ
Footer прижимается вниз путем его абсолютного позиционирования и вытягивания высоты родительских блоков (html, body и .wrapper) на 100%. При этом контентному блоку .content нужно указать нижний отступ, который равен или больше высоты подвала, иначе последний закроет часть контента.
* < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < position: relative; min-height: 100%; >.content < padding-bottom: 90px; >.footer
Второй способ
Footer прижимается вниз за счет вытягивания блока контента и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ (margin-top) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа.
* < margin: 0; padding: 0; >html, body, .wrapper < height: 100%; >.content < box-sizing: border-box; min-height: 100%; padding-bottom: 90px; >.footer
Благодаря свойству box-sizing: border-box, мы не позволяем блоку с классом .content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.
Третий способ
Он хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет.
* < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < display: table; height: 100%; >.content
Здесь мы эмулируем поведение таблицы, превратив блок .wrapper в таблицу, а блок .content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку .content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.
В результате footer прижат к низу.
Четвертый способ
Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh, которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.
* < margin: 0; padding: 0; >.content
>100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.
Узнать, какие браузеры поддерживают calc() и vh, вы можете на сайте caniuse.com по следующим ссылкам: поддержка функции calc(), поддержка единицы измерения vh.
Пятый способ (самый актуальный)
Это лучший способ из всех представленных, однако работает он только в современных браузерах, котортые поддерживают CSS свойство flex. Как и в третьем способе, высота футера значения не имеет.
* < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < display: flex; flex-direction: column; height: 100%; >.content < flex: 1 0 auto; >.footer
Узнать про поддержку браузерами свойства flex можно здесь.
Прижать блок в низу CSS — как прижать блок к низу
В чем проблема: футер (нижняя часть сайта) по умолчанию становится сразу за основным контентом и не прижимается к низу страницы.
Как должно выглядеть после решения проблемы: прижать футер к низу страницы, если контента не хватает.
На изображении ниже слева отображена страница на которой нижняя часть идет сразу за контентом (проблема), а справа страница с решенной проблемой, где нижний блок всегда прижат к низу.
На данной странице Вы можете посмотреть страницу, которая создана именно таким образом:
Посмотреть примерСкачать
Если Вы хотите научиться создавать продающие страницы с нуля, а не только подписные, тогда рекомендую свой мини-курс: «Лендинг за 60 минут».
Как прижать блок к низу?
1 HTML структура
Рассмотрим всё на простой структуре из 3-х блоков:
1 2 3 4 5 6 7 8 9 10 11
div id="container"> div id="header"> /div> div id="body"> /div> div id="footer"> /div> /div>
Один общий блок, в котором находятся три видимых блока.
2 Стили CSS
Здесь также всё довольно просто:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
html, body { height:100%; } #container { min-height:100%; position:relative; } /*Стили для блока с шапкой*/ #header { background:#222; padding:10px; } /*Стили для центральной части*/ #body { padding-bottom:70px; /* Высота блока "footer" */ } /*Стили для нижней части*/ #footer { position:absolute; bottom:0; width:100%; height:70px; /* Высота блока "footer" */ background:#66ccff; }
Здесь хочу отметить строки с комментариями, которые находятся за свойствами. Это внутренний отступ снизу у центральной части и это же число у высоты нижней части (футера). В этом и есть весь секрет.
Вывод
Для сайтов, которые рассчитаны для одного экрана, это простой способ решить проблему и прижать блок к низу на чистом CSS.
Если не получается прижать блок к низу: Вы можете обратиться ко мне за помощью, предварительно записавшись на SKYPE консультацию!
Как прижать дочерний блок к низу родительского?
В верстке есть такой блок, фиксированной высоты, в него вложены ещё три блока, верхний и нижний — фиксированной высоты, тот, что посередине — нет. Не могу понять, как прижать нижний блок к низу родительского.
Отслеживать
5,970 3 3 золотых знака 22 22 серебряных знака 44 44 бронзовых знака
задан 2 сен 2012 в 8:07
3,187 7 7 золотых знаков 46 46 серебряных знаков 95 95 бронзовых знаков
Возможный дубликат вопроса: Как всегда прижимать footer к низу экрана?
– user232857
3 апр 2017 в 21:51
5 ответов 5
Сортировка: Сброс на вариант по умолчанию
У дочернего в стилях пишите:
position: absolute; bottom: 0px; Отслеживать
ответ дан 2 сен 2012 в 8:15
4,966 10 10 золотых знаков 33 33 серебряных знака 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.