Прижать div к низу родителя: html — Как прижать дочерний блок к низу родительского?

Разное
26 Апр, 1977
0

Содержание

html — Как прижать кнопку к низу блока?

Вопрос задан 3 года 1 месяц назад

Изменён 3 года 1 месяц назад

Просмотрен 8k раза

Как прижать кнопку к низу блока, чтобы она всегда была внизу вне зависимости от наполнения блока контентом.

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 {
  position: absoulte;
  bottom: 0;
  width: 80px;
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3. 3.1/jquery.min.js"></script>
<div>
  <img src="https://picsum.photos/id/223/200/150" alt="">
  <p>текст</p>
  <button>Button</button>
</div>
<div>
  <img src="https://picsum.photos/id/222/200/150" alt="">
  <p>Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста</p>
  <button>Button</button>
</div>
<div>
  <img src="https://picsum.photos/id/225/200/150" alt="" />
  <p>текст</p>
  <button>Button</button>
</div>

html
css

Не очень понял что значит, кнопки выпадают из потока, но если имеется ввиду чтобы при растягивании блока по ширине, они всегда оставались по центру, то попробуйте обернуть кнопку в контейнер 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 {
  width: 80px;
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <img src="https://picsum.  photos/id/223/200/150" alt="">
  <p>текст</p>
  <div>
    <button>Button</button>
  </div>
</div>
<div>
  <img src="https://picsum.photos/id/222/200/150" alt="">
  <p>Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста</p>
  <div>
    <button>Button</button>
  </div>
</div>
<div>
  <img src="https://picsum.photos/id/225/200/150" alt="" />
  <p>текст</p>
  <div>
    <button>Button</button>
  </div>
</div>

Ваш ответ

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css прижать блок к низу родителя

Автор admin На чтение 5 мин. Просмотров 292 Опубликовано 15.12.2019

Здравствуйте! В сегодняшней короткой и сугубо практической статье я расскажу, как прижать, к примеру, div к низу другого div. Всё дело в том, что по одноименному запросу в своё время я не смог найти нужных мне ответов, поэтому сейчас я расскажу вам обо всех возможных способах сделать это.

Допустим, у нас есть 2 элемента на странице, неважно какие именно, для примера возьмём 2 div. Один из них будет вложен в другой, причём высота родителя будет больше высоты ребёнка:

Для красоты и наглядности я сделал дочерний элемент квадратным:

Содержание

Способ №1. Абсолютное позиционирование
Способ №2. Вертикальное выравнивание
Как прижать элементы к верху родительского
Способ #1
Способ #2
Способ #3
Способ #4
Способ #5
Способ #6
5 ответов 5
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.
Связанные
Похожие

Способ №1. Абсолютное позиционирование

Используем абсолютное позиционирование и при этом не забываем, что родительский элемент обязательно должен иметь позицию relative:

При абсолютном позиционировании другие элементы на странице ведут себя так, будто элемента с абс. позиционированием не существует.

Это значит что в таком случае:

После проделанного выше способа получиться следующее:

Все элементы легли друг на друга, так как они не понимают, что существуют другие элементы, кроме них самих. В результате последний div (зелёный) оказался выше всех, в то время как первый (красный) ниже всех.

Конечно, кто-то может поспорить и сказать, что мы можем выставить у каждого div разную велечину left, например так:

Вроде всё отлично, зачем же нам делать как-то по-другому? Во-первых, как я уже говорил, для других элементов на странице наших абсолютно позиционированных блоков с текстом просто не существует, это может поломать вашу вёрстку.

Но это ерунда, куда важнее универсальность и рациональность. Поясняю, пользуясь способом №1 мы должны:

Знать точное количество блоков;

Для каждого блока рассчитать и написать координату left;

Если со временем мы решим добавить ещё блоков, нам опять-таки придётся снова для каждого нового блока указывать свойство left.

Способ №2. Вертикальное выравнивание

Этот способ подойдёт в том случае, если, к примеру, у родителя не задана высота, в то время как все дочерние элементы имеют разные высоты:

Всё что нужно, чтобы это исправить – дописать всего лишь одну строчку:

1) Для того, чтобы применить вертикальное выравнивание (vertical-align), элементы ни в коем случае не должны иметь свойство float.
2) В отличие от предыдущего способа, нам без разницы, какую позицию (relative, absolute и тд.) будет иметь родитель, поэтому её можно просто не писать, по умолчанию она static.

Как прижать элементы к верху родительского

Обратная ситуация. Допустим нам нужно прижать div к верху родительского элемента.

Такая необходимость может появиться, например, если у вас внутри дочерних элементов высота регулируется не в CSS, а объёмом текста:

Чтобы это исправить, и прижать все элементы к верху родительского, нам необходимо задать свойство vertical-align в значение top:

Вот и всё, спасибо за внимание. На востоке Украины сегодня пасмурно, но, несмотря на это желаю всем только солнечной погоды в ваших делах, удачи!

Каждый верстальщик рано или поздно сталкивается с необходимостью прижать подвал (футер) сайта к низу страницы. В сети существует несколько способов, позволяющих решить данную проблему. Я покажу некоторые из них, которые сам использую на практике.

Простейшая html разметка:

Способ #1

Footer прижимается к низу путем его абсолютного позиционирования и вытягивания высоты родительских блоков ( html , body и wrapper ) на 100%.

При этом блоку content нужно указать нижний отступ, который равен или больше высоты футера, иначе последний закроет часть контента.

Способ #2

Footer прижимается вниз за счет вытягивания блока content и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ ( margin-top ) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа. Благодаря свойству box-sizing: border-box , мы не позволяем блоку с классом content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

Способ #3

Данный способ хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет. Здесь мы эмулируем поведение таблицы, превратив блок wrapper в таблицу, а блок content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.

Способ #4

Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh , которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту футера. 100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.

Способ #5

Пожалуй, это лучший способ из всех представленных, однако работает он только в современных браузерах. Как и в третьем способе, высота футера значения не имеет.

Способ #6

Здесь целая библиотека на разные случаи (используется Flexbox )

В верстке есть такой блок, фиксированной высоты, в него вложены ещё три блока, верхний и нижний — фиксированной высоты, тот, что посередине — нет.

Не могу понять, как прижать нижний блок к низу родительского.

5 ответов 5

У дочернего в стилях пишите:

Хм. Если размеры вам известны, то тут чистая математика. Если только средствами CSS, то можно, например, так сделать. Если размеры не известны изначально, то тут в помощь JS/jQuery.

Если коротко, то блоку обертке задаем:

А footer выносим за предел блока обертки и устанавливаем ему отрицательный верхний отступ:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Связанные

css прижать блок к низу родителя

Для красоты и наглядности я сделал дочерний элемент квадратным:

Содержание

Способ №1. Абсолютное позиционирование
Способ №2. Вертикальное выравнивание
Как прижать элементы к верху родительского
Способ #1
Способ #2
Способ #3
Способ #4
Способ #5
Способ #6
5 ответов 5
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.
Связанные
Похожие

Способ №1. Абсолютное позиционирование

Это значит что в таком случае:

После проделанного выше способа получиться следующее:

Но это ерунда, куда важнее универсальность и рациональность. Поясняю, пользуясь способом №1 мы должны:

Знать точное количество блоков;

Для каждого блока рассчитать и написать координату left;

Способ №2. Вертикальное выравнивание

Всё что нужно, чтобы это исправить – дописать всего лишь одну строчку:

Как прижать элементы к верху родительского

Обратная ситуация. Допустим нам нужно прижать div к верху родительского элемента.

Простейшая html разметка:

Способ #1

Footer прижимается к низу путем его абсолютного позиционирования и вытягивания высоты родительских блоков ( html , body и wrapper ) на 100%. При этом блоку content нужно указать нижний отступ, который равен или больше высоты футера, иначе последний закроет часть контента.

Способ #2

Способ #3

Способ #4

Способ #5

Способ #6

Здесь целая библиотека на разные случаи (используется Flexbox )

Не могу понять, как прижать нижний блок к низу родительского.

5 ответов 5

У дочернего в стилях пишите:

Если коротко, то блоку обертке задаем:

А footer выносим за предел блока обертки и устанавливаем ему отрицательный верхний отступ:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Связанные

html — Выровнять DIV по нижней или базовой линии

Вопрос задан 12 лет, 9 месяцев назад

Изменено 8 месяцев назад

Просмотрено 281k раз

Я пытаюсь выровнять дочерний тег div по нижней или базовой линии родительского тега div.

Все, что я хочу сделать, это иметь дочерний Div на базовой линии родительского Div, вот как это выглядит сейчас:

HTML

 
<дел>

CSS

 #parentDiv
{
  ширина: 300 пикселей;
  высота: 300 пикселей;
  цвет фона:#ccc;
  фон-повтор: повтор
}
#parentDiv . дочернийDiv
{
  высота: 100 пикселей;
  ширина: 30 пикселей;
  цвет фона:#999;
}

Примечание

У меня будет несколько childDiv с разной высотой, и мне нужно, чтобы все они были выровнены по базовой линии/низу.

HTML
CSS

Вам нужно добавить это:

 #родительский раздел {
  положение: родственник;
}
#parentDiv .childDiv {
  положение: абсолютное;
  внизу: 0;
  слева: 0;
}

При объявлении абсолютного элемента он позиционируется в соответствии со своим ближайшим родителем, который не является статическим (это должен быть абсолютный , относительный или фиксированный ).

Семь лет спустя поиск вертикального выравнивания все еще поднимает этот вопрос, поэтому я опубликую еще одно решение, которое у нас есть сейчас: позиционирование flexbox. Просто поставь дисплей: гибкий; выравнивание содержимого: flex-end; flex-direction: столбец в родительском div (также продемонстрировано в этой скрипке):

 #parentDiv
{
  дисплей: гибкий;
  выравнивание содержимого: flex-end;
  flex-направление: столбец;
  ширина: 300 пикселей;
  высота: 300 пикселей;
  цвет фона:#ccc;
  фон-повтор: повтор
}

Используйте значения отображения таблицы и ячейки таблицы CSS:

HTML

 
<тело>
  <дел>
    <дел>
      мой нижний выровненный div 1
      мой выровненный по нижнему краю div 2
      мой нижний выровненный div 3

CSS

 HTML, тело {
    ширина: 100%;
    высота: 100%;
}
.valign {
    дисплей: таблица;
    ширина: 100%;
    высота: 100%;
}
.valign > раздел {
    отображение: таблица-ячейка;
    ширина: 100%;
    высота: 100%;
}
. valign.bottom > div {
    вертикальное выравнивание: снизу;
}

Я создал демо JSBin здесь: http://jsbin.com/INOnAkuF/2/edit

В демо также есть пример вертикального выравнивания по центру с использованием той же техники.

это работает (я проверял только ie & ff):

 
<голова>
    <тип стиля="текст/CSS">
        # родитель {
            высота: 300 пикселей;
            ширина: 300 пикселей;
            цвет фона: #ccc;
            граница: 1px сплошной красный;
            положение: родственник;
        }
        #ребенок  {
            высота: 100 пикселей;
            ширина: 30 пикселей;
            цвет фона: #eee;
            граница: 1px сплошной зеленый;
            положение: абсолютное;
            внизу: 0;
            слева: 0;
        }
    

<тело>
    родительский
        ребенок
    
    вне

надеюсь поможет.

Ответ, опубликованный Ю. Шохамом (с использованием абсолютного позиционирования), кажется самым простым решением в большинстве случаев, когда контейнер имеет фиксированную высоту, но если родительский DIV должен содержать несколько DIV и автоматически регулировать его высоту на основе динамического содержимого , то могут возникнуть проблемы. Мне нужно было иметь два блока динамического контента; один выровнен по верхней части контейнера, а другой по нижней, и хотя я мог заставить контейнер подстраиваться под размер верхнего DIV, если бы DIV, выровненный по низу, был выше, он не изменил бы размер контейнера, но выходил бы за пределы . Описанный выше метод romiem с использованием табличного позиционирования, хотя и немного сложнее, но более надежен в этом отношении и позволяет выравнивать по низу и корректировать автоматическую высоту контейнера.

CSS

 #контейнер {
        дисплей: таблица;
        высота: авто;
}
#Топ {
    отображение: таблица-ячейка;
    ширина: 50%;
    высота: 100%;
}
#нижний {
    отображение: таблица-ячейка;
    ширина: 50%;
    вертикальное выравнивание: снизу;
    высота: 100%;
}

HTML

 
    Динамическое содержимое, выровненное по верхней части #container
    Динамическое содержимое, выровненное по нижней части #container

Я понимаю, что это не новый ответ, но я хотел прокомментировать этот подход, поскольку он привел меня к поиску решения, но как новичок мне не разрешалось комментировать, только публиковать.

Возможно, вам придется установить дочерний элемент div на position: absolute .

Обновите дочерний стиль до

 #parentDiv .childDiv
{
  высота: 100 пикселей;
  ширина: 30 пикселей;
  цвет фона:#999;
  положение: абсолютное;
  верх: 207 пикселей;
}

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

HTML

 
<дел>

Css

 parentDiv{
}
дочерний раздел {
    высота: 40 пикселей;
    верхняя граница:-20px;
}

И это просто поместит нижний div обратно в родительский div. безопасен и для большинства браузеров

У меня было что-то похожее, и я заставил его работать эффективно на добавление дочернему элементу padding-top .

Я уверен, что некоторые из других ответов здесь помогут найти решение, но я не смог заставить их легко работать спустя много времени; Вместо этого я остановился на решении padding-top, которое элегантно в своей простоте, но кажется мне несколько хакерским (не говоря уже о том, что устанавливаемое им значение пикселя, вероятно, будет зависеть от высоты родителя).

Вы также можете использовать вертикальное выравнивание

 td {
  высота: 150 пикселей;
  ширина: 150 пикселей;
  выравнивание текста: по центру;
}
б {
  граница: 1px сплошной черный;
}
.ребенок-2 {
  вертикальное выравнивание: снизу;
}
.ребенок-3 {
  вертикальное выравнивание: сверху;
}

 <граница таблицы=1>
  
    <тд>
      ребенок 1
    
    <тд>
     ребенок 2
    
    <тд>
      ребенок 3

<тело>

<стиль>
.родитель{
  цвет фона: серый;
  высота:100вх;
  дисплей: гибкий;
  flex-направление: столбец;
  выровнять содержание:пробел между;
}


<дел>
    <дел>
        Привет, мир! это первый дочерний элемент, выровненный в верхней части родительского div

<дел> Привет, мир! это первый дочерний элемент, выровненный в пространстве между первым и последним дочерним элементом