Как переместить div в самое нижнее место на html-странице [закрыто] ⇐ CSS

[Anonymous]

Я пытаюсь разместить элемент div внизу страницы в моем проекте документа Sphinx для отображения в нем некоторой информации.
Для этого я сделал следующее: следующее:

Код: Выделить всё

.cls_hdr {
left: 0;
top: 0;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
/*text-align: center;*/
/*vertical-align: middle;*/
line-height: 40px;
background-color: #0A507A;
color: #ffffff;
}

.cls_sidebar {
left: 0;
top: 40px;
width: 30%;
border: 0.1em solid #000;
background-color: #ffffff
color: blue;
}

.cls_parent_text {
top: 40px;
/*height: 100%;*/
width: 70%;
float: right;
display: flex;
flex-direction: column;
background-color: #c7eae4;
color: red;
}

.clear {
clear: both;
}

.cls_ribbon_with_info {
left: 0;
margin-top: 30px;
bottom: 0;
height: 18px;
width: 100%;
position: relative;
/* Some other stuff like */
background-color: #0A507A;
color: #ffffff;
/* others */
}

Код: Выделить всё

Header Section




Some Descrip
[list]Link 1[/list]
[list]Link 1[/list]

A veritable treasure trove can be found here
Some more text

Additional text




Lorem, little foo, more bar and sprinkle other non-sensical blah!

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


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


Отредактировано, чтобы добавить еще два раздела, вероятно, здесь не получится продемонстрировать ситуацию, но если в основном разделе cls_parent_text меньше содержимого , последний раздел cls_ribbon_with_info смещается вверх снизу.
Что я делаю что-то не так? Есть ли способ настроить сценарий так, чтобы лента всегда находилась внизу, независимо от количества текста на странице?

Подробнее здесь: https://stackoverflow.com/questions/789 ... -html-page