Как прижать элемент к низу или верху родительского элемента
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
Здравствуйте! В сегодняшней короткой и сугубо практической статье я расскажу, как прижать, к примеру, div к низу другого div. Всё дело в том, что по одноименному запросу в своё время я не смог найти нужных мне ответов, поэтому сейчас я расскажу вам обо всех возможных способах сделать это.
Допустим, у нас есть 2 элемента на странице, неважно какие именно, для примера возьмём 2 div. Один из них будет вложен в другой, причём высота родителя будет больше высоты ребёнка:
#parent < background:black; height:300px; >#childТекст дочернего элемента
Для красоты и наглядности я сделал дочерний элемент квадратным:
Способ №1. Абсолютное позиционирование
Используем абсолютное позиционирование и при этом не забываем, что родительский элемент обязательно должен иметь позицию relative:
Текст дочернего элемента
Это значит что в таком случае:
#parent < background:black; height:300px; >#child,#child2,#child3< display:inline-block; /* Сделали все div в одну строку */ height:100px; width:100px; > #child < background:red; >#child2 < background:yellow; >#child3Текст дочернего элемента 1Текст дочернего элемента 2Текст дочернего элемента 3
После проделанного выше способа получиться следующее:
Все элементы легли друг на друга, так как они не понимают, что существуют другие элементы, кроме них самих. В результате последний div (зелёный) оказался выше всех, в то время как первый (красный) ниже всех.
Конечно, кто-то может поспорить и сказать, что мы можем выставить у каждого div разную велечину left, например так:
Текст дочернего элемента 1Текст дочернего элемента 2Текст дочернего элемента 3
Вроде всё отлично, зачем же нам делать как-то по-другому? Во-первых, как я уже говорил, для других элементов на странице наших абсолютно позиционированных блоков с текстом просто не существует, это может поломать вашу вёрстку.
Но это ерунда, куда важнее универсальность и рациональность. Поясняю, пользуясь способом №1 мы должны:
Способ №2. Вертикальное выравнивание
Этот способ подойдёт в том случае, если, к примеру, у родителя не задана высота, в то время как все дочерние элементы имеют разные высоты:
#parent < background:black; >#child,#child2,#child3 < display:inline-block; >#child < background:red; height:300px; width:100px; >#child2 < background:yellow; height:100px; width:100px; >#child3Текст дочернего элемента 1Текст дочернего элемента 2Текст дочернего элемента 3
Всё что нужно, чтобы это исправить – дописать всего лишь одну строчку:
#parent < background:black; >#child,#child2,#child3< vertical-align:bottom; /* вот она */ display:inline-block; > #child < background:red; height:300px; width:100px; >#child2 < background:yellow; height:100px; width:100px; >#child3Текст дочернего элемента 1Текст дочернего элемента 2Текст дочернего элемента 3
1) Для того, чтобы применить вертикальное выравнивание (vertical-align), элементы ни в коем случае не должны иметь свойство float.
2) В отличие от предыдущего способа, нам без разницы, какую позицию (relative, absolute и тд.) будет иметь родитель, поэтому её можно просто не писать, по умолчанию она static.
Как прижать элементы к верху родительского
Обратная ситуация. Допустим нам нужно прижать div к верху родительского элемента.
Такая необходимость может появиться, например, если у вас внутри дочерних элементов высота регулируется не в CSS, а объёмом текста:
#parent < background:black; >#child,#child2,#child3 < width:100px; display:inline-block; >#child < background:red; >#child2 < background:yellow; >#child3Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1Мало текста, мало текста. Текст дочернего элемента 2Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3
Чтобы это исправить, и прижать все элементы к верху родительского, нам необходимо задать свойство vertical-align в значение top:
#parent < background:black; >#child,#child2,#child3< vertical-align:top; /* top */ width:100px; display:inline-block; > #child < background:red; >#child2 < background:yellow; >#child3Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1Мало текста, мало текста. Текст дочернего элемента 2Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3
Вот и всё, спасибо за внимание. На востоке Украины сегодня пасмурно, но, несмотря на это желаю всем только солнечной погоды в ваших делах, удачи!
Как прижать блок к низу
Как прижать подвал сайта (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 можно здесь.
Как прижать DIV к низу родителя без position: absolute и bottom: 0?
Подскажите, пожалуйста, кто знает — как избежать абсолютного позиционирования и прижать DIV к низу страницы при этом сделать так чтобы на узких экранах появлялась полоса прокрутки?
Проблема в том, что на узких экранах DIV с position: absolute перекрывает верхний контент, я пытался установить min-height у родительского DIV и даже у BODY, но это не помогает.
- Вопрос задан более трёх лет назад
- 16178 просмотров
Как прижать элемент к низу блока css
Простейший вариант для манипуляции одного блока относительно другого решается с помощью позиционирования. Исходный HTML файл:
class="wrapper"> class="content">i am a wrapper class="inside">i am inside
Допустим необходимо блок с классом inside разместить в нижней части относительно блока с классом content:
.wrapper /* Отцентрируем блоки для экспериментов и зададим им ширину*/ margin: 100px auto; width: 300px; > .content background-color: #38d9a9; height: 200px; position: relative; > .inside /* абсолютное позиционирование */ position: absolute; /* прижимаем блок к нижней границе относительно блока с position: relative*/ bottom: 0; /* задаем ширину и цвет бэкграунда для наглядности*/ width: 100%; height: 75px; background-color: #444; >