Прижать div к низу родителя: html — Прижать элемент к низу экрана, если нету прокрутки

css — Div к низу родительского? Без position: absolute!

Есть примерно такой документ:

<div .Вообще-Отец>
    <div .Отец>
        <p>Бла бла, какой-то контент
        <div .Спиногрыз>
        </div>
    </div>
    <div .Отец>
        <p>Бла бла, какой-то контент
        <div .Спиногрыз>
        </div>
    </div>
</div>

Нужно выровнять всех «спиногрызов» к низу «Отцов», но все не так просто. Отцы — flexbox элементы (чтобы имели одинаковую высоту всегда), и когда какому-то отцу привалило богатство в виде дополнительного контента, остальные отцы тоже увеличивают свою высоту и под «спиногрызами» остается свободное пространство — это не красиво.

Позиционирование абсолютное тоже не подойдет, потому что дизайн адаптивен и детишки меняют свою высоту непредсказуемо, т.е. я не знаю каким образом задать отступ снизу, чтобы дети не наползали на контент. vertical-aling: bottom примененный к спиногрызам, почему-то тоже не дал результата.

Сделать это надо только силами css.

Подскажите, кто знает! Если необходимо, можно и уйти с flexbox на table-cell, без разницы, главное сделать

Вот скрин:

• css
• css3

Ну например дать «отцам» тоже display:flex

.absolute-parent {
  border: 2px solid;
  display: flex;
}

.parent:first-of-type {
  height: 200px;
}

.parent:first-of-type p {
  height: 120px;
}

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.child {
  height: 40px;
}

<div>
  <div>
    <p>Бла бла, какой-то контент

      <div>
        дите
      </div>

  </div>
  <div>

    <p>Бла бла, какой-то контент

      <div>
        дите
      </div>
  </div>
</div>

1

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

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

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

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

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

Почта

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

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

Почта

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

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

позиционирование в CSS и HTML, relative, absolute, fixed, static, sticky

.element {
  position: relative;
  top: 10px;
}

сместят элемент относительно своего исходного положения вниз на 10px.

Содержание

1. Синтаксис
2. Значения
3. Координаты
4. Абсолютное позиционирование
5. Фиксированное позиционирование
6. “Липкое” позиционирование

Синтаксис

position: static | absolute | relative | fixed | sticky | inherit

Свойство может применяться вместе с указанием отступа от краев контейнера (левого, нижнего, правого, верхнего).

Например, создадим два контейнера, родительский (parent) – в синей рамке и дочерний (element) внутри него. Для дочернего элемента установим относительное позиционирование relative и сдвиги сверху и слева по 10px.

.element {
position: relative;
  top: 10px;
  left: 10px;
}

Результат выполнения видно ниже.

See the Pen
position relative by Андрей (@adlibi)
on CodePen.

Значения

Свойство position может принимать следующие значения:

static

По умолчанию каждый элемент имеет положение static, при котором он находится в обычном потоке страницы. Если установлено, то применение left, top, right и bottom не имеет никакого воздействия.

absolute

Элемент удаляется из потока документа, а другие блоки будут вести себя так, как будто его нет. Положение блока определяется значениями top, right, bottom, и left. Блок расположится как бы поверх всех элементов. Учтите, что на местоположение влияет значение свойства

position его предка. Позиционирование идет от ближайшего предка со значением position не равном static. Если такого не найдется, отсчет координат идет от документа.

relative

Позиционируется обычным образом, а затем смещается относительно своей позиции в соответствии со значениями top, right, bottom и left. Такое смещение не влияет на местоположение других элементов.

fixed

При указании этого значения элемент привязывается к точке на экране, указанной значениями left, top , right и bottom, при этом блок не меняет своего положения при прокрутке документа.

sticky

Экспериментальное свойство – элемент обрабатывается как имеющий относительное положение до тех пор, пока положение прокрутки области просмотра не достигнет указанного порога, после чего блок занимает фиксированное положение, в котором он и остается.

inherit

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

Координаты

Для сдвига можно использовать четыре координаты:

• top – сдвиг от верхней границы
• bottom – сдвиг от нижней границы
• left – сдвиг слева
• right – сдвиг справа

Не будут работать одновременно указанные top и bottom, left и right. Нужно использовать только одну границу из каждой пары.

В качестве указания значений можно использовать принятые в CSS единицы измерения: px, em и т.п., а также проценты. Так, left: 10% сместит элемент на 10% его ширины вправо.

Возможны отрицательные координаты. При смещении часть элемента может оказаться за границей контейнера или документа.

Рассмотрим их работу подробнее на примерах.

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

Если дочерний элемент имеет абсолютное значение, то родительский будет вести себя так, как будто дочернего вообще нет. Элемент позиционируется относительно своего ближайшего предка, который не является static. Если такого не найдется, тогда он спозиционируется относительно страницы.

Создадим два блока. При этом для предка не будем устанавливать position, а для дочернего зададим:

div.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

В результате видим, что элемент расположился относительно всего документа (прижался к его низу), а не своего предка.

See the Pen
position absolute 2 by Андрей (@adlibi)
on CodePen.

Таким образом для корректного положения нужно задать позиционирование для предка. Например:

.parent {
  position: relative;
}

Теперь свойства top, bottom, left, right соотносятся с предком и видно, как изменилось положение элемента – получилось прижать элемент к низу блока-родителя.

.element {
  position: sticky; top: 30px;
}

 #TotContainer {
  высота: 900 пикселей;
}
#контейнер {
  максимальная высота: 90%
}
.col-см-6 {
  ширина: 50%;
  плыть налево;
  высота: 100%;
  отступ: 10 пикселей;
}
.col-см-12 {
  ширина: 100%;
  плыть налево;
  фон: желтый;
}
* {
  -webkit-box-sizing: рамка-бокс;
  -moz-box-sizing: рамка-бокс;
  box-sizing: граница-коробка;
} 

 <дел>
  <дел>
    
XXXXXX
    <дел>
      
Текст для выравнивания по нижнему краю 1
      
Текст для выравнивания по нижнему краю 2