如何使 CSS 中的高度响应？

Question

我有一个像下面这样的 html，我希望它像 content-1 的高度一样工作 480px ， content-2 的高度将跟随 content-1 。我的宽度工作正常，但我的高度不符合要求。

如何在CSS中做到这一点？

   .container{
     clear: both;
    }
    .content-1{
     width:66.66%;
     position: static;
     background-image: url("../images/path1");
     background-repeat: no-repeat;
     background-size: cover;
    }

    .content-2{
     width:33.33%;
     position: static;
     background-image: url("../images/path2");
     background-repeat: no-repeat;
     background-size: cover;
    }

     <div class="container">
       <div class="content-1"></div>
       <div class="content-2"></div>
    </div>

原文由 natsumiyu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;

  margin-top: 10px;

  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
 word-break: break-all;
}

 <div class="container flex-container">
   <div class="content-1 flex-item">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
   <div class="content-2 flex-item">1</div>
</div>

原文由 Ramesh Vasoya 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

关闭你的 internal div tags 。 You can set height for your parent div ie .container:480px as below and child element take that automatically as 100% . （或）使用 jQuery 获取 .content-1 的高度并将其设置为 .content-2

     $(document).ready(function(){
    var height = $(".container > .content-1").css("height");
    $(".container > .content-2").css({
    height : height,
    background : "#f22"
     });
    });

     .container{
    width:100%;
    height:480px;
    }

    .container > .content-1{
    width:100%;
    height:100%;
    }

    .container > .content-2{
    width:100%;
    height:100%;
    }

     <div class="container">
       <div class="content-1"></div>
       <div class="content-2"></div>
    </div>

原文由 frnt 发布，翻译遵循 CC BY-SA 4.0 许可协议