Как заставить мой контейнер заполнить нижнюю часть моей страницы (если страница не прокручивается)
Я столкнулся с этой проблемой, я думаю, что ответ очень прост, но я не могу его понять.
Сначала объясню словами: У меня темный фон, моя навигация прозрачна (поэтому она выглядит как фон), а контейнер моей страницы представляет собой что-то вроде большой белой карты.
- когда страница прокручивается => высота контейнера страницы достигает нижней части страницы: прокручиваемый вид
- когда страница не прокручивается (недостаточно контента для прокрутки) => до самого низа есть пустая область: вид без прокрутки
Я проверил CSS, странного поведения нет. Я попробовал кое-что, найденное в Интернете, но результат оказался противоположным. вот моя структура dom:
#root, html {
background: #353333;
}
.page-container {
background-color: white;
margin: 0 1rem;
}
.grid {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
column-gap: 1.5rem;
row-gap: 1rem;
height: fit-content;
}<html>
<body>
<div id = "root">
<div class = "layout">
<div class = "navigation">logo, nav links ...</div>
<div class = "page-container">
<div class = "grid">
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
</div>
</div>
</div>
</div>
</body>
</html>Я не могу поделиться из-за политики конфиденциальности. Если я что-то упускаю, просто спросите, и я обновлю свой пост.
Я пытался увеличить высоту тела и корня
@Paulie_D, я добавил фрагмент. Удалите некоторые элементы div, чтобы увидеть, что контейнер страницы не заполняет нижнюю часть.
Будет ли добавление минимального размера к телу (100vh)? Я не уверен, что действительно это пойму
Ответы 3
Я думаю, то, что вы здесь ищете, иногда называют шаблоном «липкого нижнего колонтитула». При этом используется Flexbox, чтобы расширить область основного содержимого и заполнить любое пустое пространство, при этом любой нижний колонтитул будет прикреплен к нижней части области просмотра. Самое замечательное в этом методе то, что когда на странице содержится больше контента, чем может поместиться в области просмотра, все остальное работает так, как вы ожидаете, вы просто прокручиваете страницу, чтобы прочитать остальную часть контента.
Филип Уолтон на своем сайте «Solved by Flexbox» очень подробно объясняет эту технику: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Глядя на вашу структуру HTML, вам, возможно, придется расширить приведенный выше пример или настроить ее, но я думаю, что вы сможете достичь своей цели, используя эту технику.
Вы можете использовать свойство min-height для установки элемента page-container, вот пример:
.page-container {
min-height: 100vh;
}
Обоснование
Когда вы сталкиваетесь с такой проблемой, обычно разумно сузить ее до минимального количества необходимых элементов, чтобы вы могли четко видеть, какие свойства CSS необходимы, а какие нет.
Шаги
В вашем примере вам нужно сделать три вещи:
Убедитесь, что родительские контейнеры отображаются на высоте 100 %.
Установите
display: flexна родительском узле, в данном случае.layoutУстановите
flex-grow: 1на узлах, которые нужно вырасти.
Рабочий пример
html, body {
height: 100%;
margin: 0;
background: #353333;
color: #ccc;
}
.layout {
height: 100%;
display: flex;
flex-direction: column;
}
.growing-child {
flex-grow: 1;
background-color: white;
color: #333;
}
<div class = "layout">
<header>This container does not grow</header>
<main class = "growing-child">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</main>
<footer>Optional footer</footer>
</div>Примечание
Если у вас есть html и body и #root и layout, то все они должны либо иметь 100% высоту, либо иным образом расти вместе с содержимым.
Спасибо за полный ответ! Мне не хватало элемента div, который обертывает макет, и сделать это невозможно, теперь это работает.
@samy.mssi, пожалуйста, рад, что это сработало. Не могли бы вы проголосовать против, пожалуйста?
Вопросы, требующие помощи по коду, должны включать кратчайший код, необходимый для его воспроизведения, в самом вопросе, желательно в фрагменте стека с использованием значка
<>. См. Как создать минимальный воспроизводимый пример.