时间戳

首页 > 解决方案 > Css：当子元素的高度小于 100% 时，将 div 元素设置为其父元素的 100%

html - Css：当子元素的高度小于 100% 时，将 div 元素设置为其父元素的 100%

问题描述

我有一个包含 2 个元素的 flex div。当它们的内容应该是自动高度时，我希望这两个元素成为父高度，但我总是得到内部内容高度。

我的代码：

<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 应该保持自动高度。我怎样才能做到这一点？

标签： htmlcss

解决方案

而不是，height: 100%尝试上课。align-self: stretchchild

推荐阅读