Css выравнивание по низу: Как прижать элемент к низу или верху родительского элемента — Site on! — Вебджем.рф

Содержание

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

Вопрос задан 10 лет 7 месяцев назад

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

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

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

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

html
css

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

position: absolute;
bottom: 0px;

Родительскому установить:

position:relative;
padding-bottom:50px;

Дочерному:

position:absolute;
bottom:0;

Хм… Если размеры вам известны, то тут чистая математика.

Если только средствами 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 {
  padding: 5px;
}

<div>
  <div>TOP</div>
  <div>
    <p>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.
  </p>
    <p>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.</p>
  </div>
  <div>BOTTOM</div>
</div>

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

@Heidel, извините, что с опозданием, вот взгляните — http://jsfiddle.net/Alex83/qktyU/

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

min-height: 100%; /*При этом у body, html { width: 100%; height: 100%;*/

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

margin-top: -50px;

#wrapper {
 display: flex;
 flex-direction: column;
 height: 600px;
}
#center {
 flex-grow: 1;
}

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

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

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

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

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

Почта

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

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

Почта

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

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

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

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

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

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

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

Почта

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

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

Почта

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

html — Как выровнять метку по «НИЗУ» div в CSS?

спросил 8 лет, 8 месяцев назад

Изменено 5 лет назад

Просмотрено 40 тысяч раз

DEMO можно найти по адресу:

http://www. bootply.com/VZ7gvA7ndE#

Я установил высоту div на 100 пикселей и хотите показать метку в нижней части div . Я использую

 #contain-word-lab {
  вертикальное выравнивание: снизу;
  нижняя граница: 5px;
}

Однако это совсем не работает. Метка по-прежнему выравнивается по верхней части div .

У кого-нибудь есть идеи по этому поводу? Почему вертикальное выравнивание здесь не работает? Спасибо!

html
css
twitter-bootstrap
вертикальное выравнивание

2

`Почему`

 вертикальное выравнивание: нижний  не работает в одиночку Поскольку высота родительского элемента больше вычисленной высоты метки, использование  вертикального выравнивания: нижний   не будет  перемещать это (встроенное ) в нижнюю часть родителя.
 Поскольку во встроенном потоке  вертикальное выравнивание  определяет, как элементы позиционируются на основе их родительской базовой линии; И использование этого свойства на метке не изменит положение базовой линии ее родителя.
 Элементы встроенного уровня (  встроенный  ,  встроенный блок  ) по умолчанию находятся в своей базовой линии  . И если они имеют разную высоту, самый высокий элемент будет определять, где должны быть размещены остальные.
 Т.е. Во встроенном потоке самый высокий элемент будет влиять/перемещать базовую линию родителя:
 Поиск решения 
 Следовательно, в случаях, когда у родителя есть явная высота 
   , если бы мы могли иметь встроенный дочерний элемент, который имеет точно такой же высоты, как у родителя (полный дочерний элемент), это повлияет на встроенный поток и переместит базовую линию вниз:
 А для того, чтобы элементы (включая буквы с нисходящими элементами) оставались внутри родителя, мы должны выровнять их по вертикали на  vertical-align: bottom; декларация .
  10.8 Расчет высоты строки: свойство 'vertical-align' 
   базовая линия   
 Совместите базовую линию блока с базовой линией родительского блока. Если у коробки нет базовой линии, выровняйте нижнюю
 край поля с базовой линией родителя.
   низ   
 Выровняйте низ выровненного поддерева с низом строки.
 Таким образом, вы можете создать элемент полной высоты (лично я бы предпочел использовать псевдоэлементы) внутри родителя, чтобы выровнять метку внизу.
  ПРИМЕР ЗДЕСЬ 
 #contain-word-div:after {
  содержание: "";
  отображение: встроенный блок;
  высота: 100%; /* Пусть он будет такой же высоты, как родитель */
  вертикальное выравнивание: снизу; /* Выровняйте элемент по нижнему краю */
}
#contain-word-lab {
  отображение: встроенный блок;
  вертикальное выравнивание: снизу; /* Выровняйте элемент по нижнему краю */
}
 
 7
 быстрый пример
 http://jsfiddle. net/oa2gmuq3/
 если добавить
 position:absolute;
внизу: 0px;
 
 на метку, которую он любит держать внизу
 установить его как position:absolute;
 #содержащая-слово-лаборатория {
  положение: абсолютное;
  внизу: 5 пикселей;
}
 
 Примените  position:relative  к родительскому div и сделайте свою метку как  position:absolute  .
 #содержит-слово-дел {
 высота: 100 пикселей;
 должность: родственница;
 }
 #contain-word-lab {
  положение: абсолютное;
  внизу: 5 пикселей;
 }
 
  ДЕМО 
 1
  вертикальное выравнивание  лучше всего работает, когда контейнеры представляют собой таблицы/табличные элементы (например,  table  ,  tr  ,  td  ,  th  ) или встроенные текстовые элементы (например,  диапазон  ) . Однако, поскольку  таблица 9Элементы 0016 для макета — не лучшая идея. Мы можем заставить другие элементы функционировать подобно им, используя  display:table;  и  display:table-cell;  свойств css.
 Попробуйте применить следующий CSS:
 #contain-word-div {
  высота: 100 пикселей;
  граница: 1px сплошной черный; /* добавлено только для визуализации позиции */
  дисплей: таблица;
}
#contain-word-lab {
  дисплей: таблица-ячейка;
  вертикальное выравнивание: снизу;
  нижний отступ: 5 пикселей; /* используйте отступы, чтобы придать метке большую высоту, а не пытаться подтолкнуть «ячейку» вверх */
}
 
 ДЕМО
 2
  вертикальное выравнивание  применяется только к ячейкам таблицы. Если вы хотите расположить элемент внизу его родителя, вам нужно указать  position: absolute;  и  снизу: 0;  .
 2
 Попробуйте сделать следующее
  FIDDLE DEMO 
 #contain-word-lab {
    vertical-align='bottom';/***Удалить это***/
    внизу: 2px;
    положение: абсолютное;
}
 
 1
 "Нижний" все равно не подойдет 🙂 Попробуйте просто  нижний  , без ". Кроме того, ваша этикетка тоже нуждается в высоте. Теперь используется его автоматическая высота, и это именно тот размер шрифта. Я бы предложил добавить  line-height: 100px;  на ваш лейбл.
 Зарегистрируйтесь или войдите 
 Зарегистрируйтесь с помощью Google
 Зарегистрироваться через Facebook
 Зарегистрируйтесь, используя электронную почту и пароль
 Опубликовать как гость 
 Электронная почта
 Обязательно, но не отображается
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 DIV выровнять по правому нижнему краю (или по левому краю!) 
 Dare to Think | Веб-дизайн и разработка Узнайте, как выровнять DIV по нижнему левому или правому краю.
 Опубликовано 13 июня 2009 г.
 Обновлено 21 марта 2023 г.
 Это всегда было одной из тех проблем, с которыми я сталкивался при работе с CSS — выравнивание содержимого по нижнему краю элемента, содержащего DIV, будь то выравнивание по левому или правому краю. Итак, вот как это сделать.
 Ключ для использования свойства «позиция». Дайте своему содержащему DIV относительную позицию, а содержимому - абсолютную позицию.
 Я нахожу эти вещи проще, если вы можете просто взять пример страницы и поэкспериментировать с ней в удобное время, поэтому загрузите эту единственную HTML-страницу и играйте.
 Для тех, кому нравится вот этот код:
 CSS
 #container
{
ширина: 300 пикселей;
высота: 200 пикселей;
граница: сплошная 1px #000;
положение: родственник;
}
#Нижний правый
{
справа: 0;
внизу: 0;
положение: абсолютное;
}
#Нижний левый
{
слева: 0;
внизу: 0;
положение: абсолютное;
} 
 HTML
 
<дел>
Нижний правый

<дел>
Нижний левый