Блог

Главная - Вопросы по программированию - Как сделать так, чтобы div занимал всю высоту страницы при уменьшении высоты браузера в CSS

Как сделать так, чтобы div занимал всю высоту страницы при уменьшении высоты браузера в CSS

#html #css

Вопрос:

Когда мы устанавливаем высоту элемента уровня блока на 100%, он будет занимать всю высоту min-height: 100%; страницы или, по крайней мере, полную высоту ее родительского элемента, однако, что странно для меня, поскольку я сейчас изучаю CSS, так это то, что когда я уменьшаю высоту окна браузера

Вот несколько секунд видео, чтобы показать, что я имею в виду. Видео

Как вы уже можете видеть из видео, когда я делаю высоту браузера очень короткой, а затем прокручиваю вниз, я вижу, что раздел содержимого больше не занимает всю высоту, пока я не увеличу высоту браузера немного больше, однако боковая панель и разделы профиля этого не делают, поскольку их ширинаменьше, чем раздел содержимого.

Итак, вопрос в следующем: как сделать так, чтобы div сохранял свою полную высоту при уменьшении высоты браузера, а затем прокручивал вниз, как вы можете видеть из видео?

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 90%;
}

body {
  position: relative;
  overflow-y: scroll;
  height: 100%;
}

h2 {
  margin-bottom: 2em;
  text-align: center;
}

p {
  text-align: center;
}

.sidebar {
  position: absolute;
  width: 15%;
  left: 0;
  top: 0;
  background-color: darkblue;
  color: white;
  padding: 2em;
  margin: 2em;
  min-height: 100%;
}

.content {
  position: absolute;
  width: 60%;
  left: calc(15%   2em);
  top: 0;
  background-color: green;
  color: white;
  padding: 2em;
  margin: 2em;
  min-height: 100%;
}

.profile {
  position: absolute;
  width: 15%;
  top: 0;
  left: calc(75%   4em);
  padding: 2em;
  margin: 2em;
  background-color: firebrick;
  color: black;
  min-height: 100%;
}

button {
  display: block;
  margin-top: 2em;
} 
 <div class="sidebar">
  <h2>Sidebar</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>
<div class="content">
  <h2>Content</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>
<div class="profile">
  <h2>Profile</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>

Мой код в codepen: Code

Комментарии:

1. используйте flexbox flex-grow . height: 100% означает 100% высоты родительских элементов. Для этого требуется определенная высота, в то время как значение по умолчанию рассчитывается как fit-content . Альтернативно использовать min-height: 100vh для установки высоты на 100% от области просмотра

Ответ №1:

CSS-сеточное решение

Один из простых способов — использовать CSS-Grid. Я сократил ваш код до той части, которая на самом деле «полезна», и удалил весь ненужный или нерабочий код.

display: grid активирует CSS-Grid
grid-template-columns: 15% auto 15% создает макет из 3 столбцов, auto занимая оставшееся пространство.
min-height: 100vh размеры полей должны быть как минимум такими же высокими, как окно просмотра.

 body {
  display: grid;
  grid-template-columns: 15% auto 15%;
  grid-gap: 2em;
  padding: 2em;
  min-height: 100vh;
}





/* original CSS cut down */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h2 {
  margin-bottom: 2em;
  text-align: center;
}

p {
  text-align: center;
}

.sidebar,
.content,
.profile {
  padding: 2em;
}

.sidebar {
  background-color: darkblue;
  color: white;
}

.content {
  background-color: green;
  color: white;
}

.profile {
  background-color: firebrick;
  color: black;
} 
 <div class="sidebar">
  <h2>Sidebar</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>
<div class="content">
  <h2>Content</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>
<div class="profile">
  <h2>Profile</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>

Решение Flexbox:

Чтобы использовать Flexbox, вы должны использовать display: flex . То же, что и в CSS-Grid решении, вы также предоставляете телу a min-height: 100vh , чтобы заполнить, по крайней мере, весь видовой экран.
Чтобы получить предполагаемый макет из 3 столбцов, вы должны определить свою левую и правую стороны как width: 15% . Чтобы средний столбец заполнял оставшееся пространство, вам просто нужно добавить: flex-grow: 1; 

 body {
  display: flex;
  gap: 2em;
  padding: 2em;
  min-height: 100vh;
}

.sidebar,
.profile {
  width: 15%;
}

.content {
  flex-grow: 1;
}



/* original CSS cut down */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h2 {
  margin-bottom: 2em;
  text-align: center;
}

p {
  text-align: center;
}

.sidebar,
.content,
.profile {
  padding: 2em;
}

.sidebar {
  background-color: darkblue;
  color: white;
}

.content {
  background-color: green;
  color: white;
}

.profile {
  background-color: firebrick;
  color: black;
} 
 <div class="sidebar">
  <h2>Sidebar</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>
<div class="content">
  <h2>Content</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>
<div class="profile">
  <h2>Profile</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>

Комментарии:

1. Спасибо за ваш ответ, однако это не то, что я ищу, поскольку 3 divs теперь не занимают всю высоту страницы. И является ли система css-grid единственным решением здесь? @tacoshy

2. Что вы имеете в виду? Я дал вам 2 возможных решения, и в обоих фрагментах divs всегда занимают как минимум всю высоту экрана.

3. Я действительно ценю ваши решения, однако мне нужно, чтобы вы пошли и посмотрели видео еще раз. Я имею в виду, что нужно попытаться сделать высоту страницы браузера меньше 20%, а затем прокрутить вниз, тогда вы увидите, что divs больше не занимают всю высоту. @tacoshy

Метки: , ,