Как прижать элемент к низу блока 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; > Как прижать элемент к низу или верху родительского элемента
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
Здравствуйте! В сегодняшней короткой и сугубо практической статье я расскажу, как прижать, к примеру, 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
Вот и всё, спасибо за внимание. На востоке Украины сегодня пасмурно, но, несмотря на это желаю всем только солнечной погоды в ваших делах, удачи!
Как прижать кнопку к низу блока?
Как прижать кнопку к низу блока, чтобы она всегда была внизу вне зависимости от наполнения блока контентом.
position: absolute; bottom: 0; не подходит, потому что блоки могут растягиваться по длине и кнопки выпадают из потока.
.block < position: relative; display: inline-block; width: 200px; height: 320px; color: steelblue; border: 1px solid red; text-align: center; >.text < font-size: 20px; margin: 0 auto 0; >.button
текст
Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста
текст
Отслеживать
задан 26 авг 2019 в 10:30
535 1 1 золотой знак 5 5 серебряных знаков 20 20 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Не очень понял что значит, кнопки выпадают из потока, но если имеется ввиду чтобы при растягивании блока по ширине, они всегда оставались по центру, то попробуйте обернуть кнопку в контейнер btn-cont сделать его абсолютным и на всю ширину. Внутри расположите Вашу кнопку и сделайте контейнер flex , с justify-content: center . Тем самым блок всегда будет внизу и при расширении или уменьшении родителя кнопка будет располагаться в центре. Если же имеется ввиду, чтобы текст не заезжал на кнопку, то добавьте родителю padding-bottom: (высота кнопки +- несколько пикселей) Пример ниже (без отступов):
.block < position: relative; display: inline-block; width: 200px; min-height: 320px; color: steelblue; border: 1px solid red; text-align: center; padding-bottom: 40px >.text < font-size: 20px; margin: 0 auto 0; >.btn-cont < width: 100%; height: 30px; position: absolute; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; >.button
текст
Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста
текст
Выравнивание по низу карточки
При верстке карточек товаров для каталога или аналогичных блоков, описание в карточке может значительно отличаться по объему текста. В результате, контент после этого текста располагается на разной высоте, что в большинстве случаев неприемлемо. Как это исправить?
Варианты решения
Возможные, но некорректные решения
Первый вариант — блоку с текстом можно задать фиксированную высоту, но это будет некорректно, так как неизвестно, какой объем текста будет использоваться для описания.
Второй вариант — блоку, который нужно прижать к низу карточки, присвоить position: absolute; bottom: 0; и внизу карточки сделать увеличенный внутренний отступ padding , но опять же вариант некорректен, так как придется надеяться, что этого отступа всегда будет хватать.
Корректное решение
Для корректного решения данной задачи воспользуемся display: flex
Рассмотрим простой пример
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur accusantium corrupti reiciendis nisi voluptatum nobis vitae et, quo quaerat excepturi tempora, libero perspiciatis quae voluptates qui dolores autem doloribus ab. Button Lorem ipsum dolor sit amet Button Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum voluptate vero ipsa praesentium autem nihil. Button Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum voluptate vero ipsa praesentium autem nihil. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum voluptate vero ipsa praesentium autem nihil. Button Есть замечательное свойство flex-grow: 1; , которое позволяет элементу растягиваться и занимать все доступное свободное пространство в родительском блоке, а также есть сокращенная запись этого свойства — flex: 1;
Чтобы свойство flex: 1; для блока заработало, необходимо родительскому блоку присвоить display: flex; и flex-direction: column; чтобы элементы располагались вертикально
Далее, если в ряду карточек у текста одинаковое количество строк, блоки с текстом будут одинаковой высоты, и нижний контент итак будет выровнен по низу карточки
Но если в ряду карточек имеются карточки с разным количеством текста, то карточки растягиваются по высоте самой высокой в ряду и внизу карточки образуется свободное пространство, так как у родительского блока установлено display: flex; , a у него по умолчанию align-items: stretch;
Это свободное пространство занимаем блоком с помощью свойства flex: 1; , а нижний блок с контентом прижимается к низу карточки, чего мы и добивались
.simple__flex < display: flex; justify-content: space-between; >.simple__card < padding: 30px; width: calc(25% - 10px); display: flex; flex-direction: column; /* располагаем и вертикально */ >.simple__text < flex: 1; /* растягиваем на все доступное свободное пространство в карточке */ >.simple__button
Более сложный пример с адаптивной сеткой
Посмотрите пример на Codepen
Полный код примера
Catalog One Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, maiores. $49 Buy 
Catalog Two Consectetur adipisicing elit $19 Buy 
Catalog Three Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, ipsum. Lorem ipsum dolor sit amet. $89 Buy 
Catalog Four Consectetur adipisicing elit $39 Buy 
Catalog Five Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi et vel pariatur laborum sed nihil quisquam, neque rerum atque minus! $69 Buy 
Catalog Six Consectetur adipisicing elit onsectetur adipisicing elit $99 Buy @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&display=swap"); *, *::before, *::after < box-sizing: border-box; >body < margin: 0; padding: 0; font-family: 'Rubik', sans-serif; >.container < padding: 0 30px; max-width: 1200px; margin: 0 auto; >.card < border-radius: 15px; overflow: hidden; height: 100%; display: flex; flex-direction: column; background: #fff; >.card__image < height: 200px; overflow: hidden; width: 100%; border-radius: 15px; >.card__image img < display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; >.card__body < padding: 15px; flex: 1; display: flex; flex-direction: column; >.card__title < font-size: 24px; text-align: center; margin-bottom: 15px; >.card__text < text-align: center; font-size: 16px; flex: 1; margin-bottom: 15px; font-weight: 300; >.card__bottom < display: flex; align-items: center; justify-content: space-evenly; >.card__cost < font-size: 24px; color: #4a60d7; font-weight: 300; >.button < text-align: center; >.button a < display: inline-flex; padding: 0 15px; background: #4a60d7; align-items: center; justify-content: center; text-align: center; height: 40px; width: 100px; color: #fff; border-radius: 5px; text-decoration: none; transition: all 0.6s ease; >.button a:hover < background: #40ffdc; >.catalog < background: #f1f1f1; padding: 60px 0; >.catalog__title < margin-bottom: 60px; >.catalog__row < display: flex; flex-wrap: wrap; margin: 0 -15px -30px; >.catalog__col < width: 33.33333333%; padding: 0 15px 30px; >@media (max-width: 991.98px) < .container < padding: 0 15px; >.popular__col < width: 50%; >> @media (max-width: 767.98px) < .catalog__col < width: 100%; >> Полезные ссылки