Bootstrap / CSS -нижний колонтитул не оставаться внизу ⇐ CSS

[Anonymous]

Я сталкиваюсь с проблемой с макетом моего веб -сайта, где нижний колонтитул не остается в нижней части экрана на страницах с небольшим содержанием. Вместо этого он остается на полпути. Однако, когда будет достаточно контента для прокрутки, нижний колонтитул ведет себя правильно. Я использую Bootstrap и Flexbox для обработки макета, но нижний колонтитул не всегда придерживается дна, когда есть минимальное содержание. >







{% block content %}
{% endblock %}



Gavin Reid © 2025

Cookie Policy |
Terms and Conditions |
Privacy Policy




< /code>
и мой css: < /p>
html, body {
height: 100%; /* Ensure full screen height */
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}

body {
min-height: 100vh; /* Ensure the body takes full height */
display: flex;
flex-direction: column;
}

.container-fluid {
flex: 1; /* Makes the content fill the remaining space */
padding-top: 1.5rem; /* Space between navbar and content */
}

footer {
margin-top: auto; /* Ensure footer stays at the bottom */
padding: 10px;
background-color: #f7f7f7;
text-align: center;
color: #666;
}
< /code>
На страницах с минимальным содержанием нижний колонтитул не остается в нижней части экрана. Вместо этого он появляется на полпути. Я использую Flexbox для макета, но нижний колонтитул, похоже, не подталкивает к дну, когда содержание мало. Как я могу решить эту проблему, чтобы нижний колонтитул оставался в нижней части экрана, даже когда содержание мало?
Заранее.

Подробнее здесь: https://stackoverflow.com/questions/794 ... -at-bottom