Блог

Главная - Вопросы по программированию - Css: установите элемент div на 100% от его родительского элемента, если его дочерний элемент имеет высоту менее 100%

Css: установите элемент div на 100% от его родительского элемента, если его дочерний элемент имеет высоту менее 100%

#html #css

#HTML #css

Вопрос:

У меня есть гибкий div, который содержит 2 элемента. Я хочу, чтобы 2 элемента были родительской высотой, когда их содержимое должно иметь автоматическую высоту, но я всегда получаю внутреннюю высоту содержимого.

мой код:

 <html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
    html, body {
        height: 100%;
        margin: 0px;
    }
  .parent {
    background: gray;
    display:flex;
    align-items: center;
  }
  .child {
    height: 100%;
    background: blue;
    border: 1px solid white;
  }
</style>
</head>
<body>
  <div class="parent">
    <div class="child">
      <div>
        <div>abc</div>
        <div>abc</div>
    </div>
    </div>
     <div class="child">
      <div>abc</div>
    </div>
  </div>
</body>
</html>

Второй «дочерний» div также должен иметь родительскую высоту, в то время как его внутренний div должен оставаться автоматической высотой. Как я могу это сделать?

Ответ №1:

Вместо height: 100% этого попробуйте align-self: stretch child класс.

Ответ №2:

Вам необходимо сохранить выравнивание по умолчанию и удалить height: 100% , чтобы дочерние элементы были растянуты по умолчанию.

Затем установите display: flex также для детей с желаемым выравниванием

    html, body {
    height: 100%;
    margin: 0px;
  }
  
  .parent {
    background: gray;
    display:flex;
  }
  
  .child {
    background: blue;
    border: 1px solid white;
    display: flex;
    align-items:center;
  } 
   
   <div class="parent">
    <div class="child">
      <div>
        <div>abc</div>
        <div>abc</div>
    </div>
    </div>
     <div class="child">
      <div>abc</div>
    </div>
  </div>

Ответ №3:

Добавьте высоту в .parent div, например: height: 300px; или height: 100%; 

 html,
body {
  height: 100%;
  margin: 0px;
}
.parent {
  background: gray;
  display: flex;
  align-items: center;
  height: 200px;
}
.child {
  height: 100%;
  background: blue;
  border: 1px solid white;
} 
 <body>
  <div class="parent">
    <div class="child">
      <div>
        <div>abc</div>
        <div>abc</div>
      </div>
    </div>
    <div class="child">
      <div>abc</div>
    </div>
  </div>
</body>