Блог

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

Адаптация высоты div к содержимому, если она превышает начальную высоту

#html #css

Вопрос:

У меня есть следующий html/css код. Что я хотел бы сделать, так это сделать .inner высоту элемента адаптируемой к содержимому только в том случае, если она превышает минимальную высоту по умолчанию, установленную мной в коде. Приведенный ниже код не позволяет .box элементам растягиваться за пределы начальной высоты .inner , чего я не хочу делать. Я подозреваю, что это как-то связано flex . Если я удаляю display:flex; из .inner , коробки растягиваются за пределы начальной высоты .inner , но .inner не растягиваются для размещения содержимого. Я хочу .inner растянуть в этом случае, используя display:flex; или display:grid; для .inner того , чтобы в противном случае вести себя так, как я задал в своем коде. Как этого можно достичь?

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

.header {
  width: 100%;
  height: 70px;
  background-color: steelblue;
}

.container {
  width: 100%;
  height: calc(100vh - 70px);
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  width: 95%;
  height: 100%;
  background: steelblue;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.box {
  width: 200px;
  height: 400px;
  background-color: burlywood;
  margin: 10px;
} 
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="style.css" rel="stylesheet" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="header"></div>
    <div class="container">
      <div class="inner">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </div>
  </body>
</html>

Это код и коробка

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

1. Что вы хотите, чтобы произошло, если высота внутреннего (или сумма внутренних высот) больше высоты контейнера?

2. @AHaworth Есть только один внутренний. Я думаю, что контейнер тоже должен растягиваться до своего содержимого. Но высота внутренней части зависит от высоты контейнера. Итак, я не уверен, как с этим справиться. Может быть, есть лучший способ, чем использовать проценты?

3. Извините, моя ошибка, я имел в виду коробки, а не внутренние.

4. Пожалуйста, опубликуйте фотографию образа, которого вы хотите добиться. Я действительно не знаю, что вы подразумеваете под начальной высотой .inner, потому что она определена как 100%. Это означает, что высота зависит от родителя, которым является .container… тогда вам в первую очередь понадобился .внутренний… хммм

5. @KoutaNakano Это правда, внутренняя высота составляет 100% от установленной высоты контейнера height: calc(100vh - 70px); , поэтому внутренняя имеет начальную высоту. Мне нужно внутреннее, чтобы изменить цвет фона, отличный от цвета контейнера.

Ответ №1:

Если вы хотите установить минимальную высоту по умолчанию, измените высоту на минимальную высоту для .container.

В настоящее время определено свойство .высота контейнера. Поэтому высота не масштабируется.

Метки: ,