Есть двухколоночная верстка. Левая сторона - длинный сайдбар. Правая - контент. Футер существует только для контента (правой стороны). Как правило, сайдбар длиннее правой стороны. Как сделать футер прижатым к низу окна браузера, если контентная часть меньше окна, и оставить его просто внизу контента, если контента много. И конечно сайдбар не должен быть ниже уровня футера контента.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="left">Сайдбар</div>
<div class="right">
<div class="content">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</div>
<div class="footer">Подвал</div>
</div>
</div>
</body>
</html>
Делал с помощью флексов, но футер подгоняется под высоту более длинного столбца (как правило сайдбара):
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.right {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex: 1 0 auto;
}
.footer {
flex: 0 0 auto;
}
Простой
Простой