Блог

Главная - Вопросы по программированию - html css увеличивает высоту родительских элементов, если высота дочерних элементов увеличивается при прокрутке

html css увеличивает высоту родительских элементов, если высота дочерних элементов увеличивается при прокрутке

#html #css

#HTML #css

Вопрос:

Вот мой html-макет

 html, body {
  margin:0px;
  padding:0px;
  height: 100vh;
  background-color: gray;
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: red;
}

.left {
  flex: 0.5;
  height: 500px;
  background: blue;
}

.right {
  flex: 0.5;
  height: 1300px;
  background: green;
}  
 <!DOCTYPE html>
<html>
<body>
  <div class="container">
  
    <div class="left"></div>

    <div class="right"></div>

  </div>
</body>
</html>

Здесь класс «right» имеет высоту 1300 пикселей, что позволяет перейти к окну.
Когда я прокручиваю родительский «контейнер», он не равен высоте «справа».

Я хочу, чтобы высота родительского «контейнера» была увеличена, если увеличена «правильная» высота дочернего элемента «.

Как этого добиться??

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

1. height: 100%; —> min-height: 100%; ?

2. @Temani Хороший ответ.. Добавьте минимальную высоту в класс контейнера. Это .container {min-height: 100%;} точно работает 🙂

3. @TemaniAfif не сработал .. дочерний элемент, по-видимому, имеет большую высоту, чем родительский

4. это работает на основе вашего объяснения. Если нет, проясните свой вопрос и покажите нам предполагаемый результат

Ответ №1:

Я не понял, что вы имеете в виду, но протестируйте этот код..

 .container {
    display: -ms-grid;
    display: grid;
    background-color: red;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap:30px;
    width: 100vw;
    height: 100vh;
 }

 .left {
    height: 200px;
    background: blue;
 }

 .right {
    background: green;
 }