Прижать блок к низу css
Сегодня поставим "блок снизу css", как "прижать блок к низу css" или же поставить блок к низу.
Пошагово - располагаем блок снизу.
- Блок в блоке по умолчанию.
- Прижимаем блок снизу - fixed
- Прижимаем блок снизу - table
- Прижимаем блок снизу - position
- Прижимаем блок снизу - flex
- Прижимаем блок снизу - flex-2
Блок в блоке по умолчанию
Первый вопрос, который вы должны были задать - зачем располагать блок в блоке?
Неужели нельзя прижать "наш блок" без второго блока!
Естественно можно!
Но ведь нам нужно и в том числе, чтобы разобрать методы прижимания блока внутри другого блока...
Рассмотрим блок с блоком, которые не располагается внизу... все стили по умолчанию. Чтобы вы могли его увидеть добавил border:
<div style ="border: 1px solid; width: 100%; height: 60px;">
<div style ="border: 1px solid; width: 100%; height: 20px;">Здесь блок по умолчанию, который не прижат с помощью css никак...</div>
</div>
Как видим, что блок по умолчанию, если на него не влияют никакие правила, то располагается слева в верхними углу...
Прижимаем блок снизу - fixed
Для того, чтобы прижать "блок снизу" и чтобы он не двигался - используем "position: fixed;"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.fixed{
border: 1px solid red;
padding: 5px;
position: fixed;
bottom: 0px;
width: 100%;
}
</style>
</head>
<body>
<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-
<div class=fixed> Здесь блок, который прижат снизу </div>
</body>
</html>
Смотрим на блок, который прижат снизу:
Поскольку данный вариант нужно выделить в отдельную страницу, чтобы он не портил вид основной страницы! 
Прижимаем блок снизу - table
Выше вы видели блок, который располагается по умолчанию - теперь давайте его прижмем к низу!
Для того, чтобы прижать блок к низу вам понадобится:
Используем два div с классами : "table" и "example".
Классу "table" присваиваем display = table(т.е. это будет таблица)
А классу "example" - "display: table-cell" - это будет ячейка таблицы.
Ну и далее позиционирование... снизу...
Чтоб вы могли увидеть сам блок добавим ему background.
+ Туда же поставим второй блок для сравнения... "example_0".
Соберем весь код:
Код блока снизу.
Html:
<div class=table>
<div class="example_0">Здесь блок который находится сверху... просто для примера...</div>
<div class=example>Здесь блок, который прижат с помощью css </div>
</div>
Css :
<style>
.table {
display: table;
border: 1px solid;
width: 100%;
height: 60px;
}
.example {
background: #ffed00;
display: table-row-group;
width: 101%;
height: 20px;
}
.example_0 {
border: 1px solid;
}
</style>
Пример кода блока снизу.
Разместим выше приведенный код с блоком снизу прямо здесь:
Прижимаем блок снизу - position
Для того, чтобы прижать/расположить блок снизу - вам понадобится:
Для родительского блока устанавливаем "position" = relative.
Для внутреннего "position" = absolute.
+ добавим бордюр(border) :
+ bottom = 0 :
Соберем весь код:
Код блока снизу - position.
Html:
<div class=relative>
<div class=absolute>Прижимаем блок снизу - position : relative + absolute</div>
</div>
Css:
<style>
.relative{
width: 100%;
height: 60px;
border: 1px solid #ab00ff;
position: relative;
}
.absolute {
position: absolute;
bottom: 0px;
border: 1px solid red;
}
</style>
Пример кода блока снизу(position).
Разместим выше приведенный код с блоком снизу при помощи свойств "position" прямо здесь:
Прижимаем блок снизу - flex + column-reverse.
Для того, чтобы прижать блок к низу вам понадобится:
Используем два div, для первого "div" присвоим класс : "fle_x".
Классу "fle_x" присваиваем display = flex.
+ Направление :
Добавим прижимаемому блоку бордюр(border), чтобы можно было увидеть края блока:
Соберем весь код:
Код блока снизу - flex + column-reverse.
Html:
<div class=fle_x>
<div style ="border: 1px solid red;">Прижимаем блок снизу - flex + flex-reverse</div>
</div>
Css:
<style>
.fle_x {
display: flex;
border: 1px solid;
height: 60px;
flex-direction: column-reverse;
}
</style>
Пример кода блока снизу(flex).
Разместим выше приведенный код с блоком снизу при помощи свойств "flex" здесь:
Прижимаем блок снизу - flex + flex-end
Для того, чтобы прижать блок к низу вам понадобится:
Используем два div, для первого "div" присвоим класс : "fle_x_2".
Классу "fle_x_2" присваиваем display = flex.
+ Направление :
Добавим прижимаемому блоку бордюр(border) :
Соберем весь код:
Код блока снизу - flex + flex-end.
Html:
<div class=fle_x_2>
<div style ="border: 1px solid red;">Прижимаем блок снизу - flex + flex-end</div>
</div>
Css:
<style>
.fle_x_2{
width: 100%;
height: 60px;
display: flex;
align-items: flex-end;
border: 1px solid #ab00ff;
}
</style>
Пример кода блока снизу(flex).
Разместим выше приведенный код с блоком снизу при помощи свойств "flex" здесь:
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже:
