使子div与父div的高度相同

Question

 .propertydetailbox2 { overflow:auto; border: 1px black solid; } .propertydetailtextbox { width: 30%; float:left; border: 1px solid #cccccc; border-radius: 8px; margin: 0 auto; margin-right:1%; padding:20px; padding-left:50px; height: auto; text-align:left; } .propertydetailagentbox { width: 30%; height: 100%; float:left; border: 1px solid #cccccc; border-radius: 8px; margin: 0 auto; margin-left:1%; padding:20px; } 

 <div class ="propertydetailbox2"> <div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div> <div class="propertydetailagentbox">1<br>2</div> </div> 

嗨，我有一个包含两个盒子（子盒子）的容器，我希望父母拿到已经用overflow:auto;完成的最高孩子的高度overflow:auto; ，那么我希望第二个孩子（矮个）与父母的身高相同。 我已经尝试过这里给出的各种解决方案CSS-将float子DIV高度扩展到父级的高度，但使用相对和绝对堆栈将子div彼此叠置，并使用margin-bottom：-99999px; padding-bottom：99999px; 从底部切下第二个孩子的边框，我需要响应式解决方案。

父div

.propertydetailbox2 {
    overflow:auto;
}

小孩1

.propertydetailtextbox {
    width: 30%;
    float:left;
    border: 1px solid #cccccc;
    border-radius: 8px;
    margin: 0 auto;
    margin-right:1%;
    padding:20px;
    padding-left:50px;
    height: auto;
    text-align:left;
}

小孩2

.propertydetailagentbox {
    width: 30%;
    height: 100%;
    float:left;
    border: 1px solid #cccccc;
    border-radius: 8px;
    margin: 0 auto;
    margin-left:1%;
    padding:20px;
}

请参阅jsfiddle的编辑，div应该并排，但是在jsfiddle中，它们彼此重叠

Answer 1

您可以使用display而不是float：

• 柔性

 .propertydetailbox2 { display: flex; border: 1px black solid; } .propertydetailtextbox { flex: 1; border: 1px solid #cccccc; border-radius: 8px; margin: 0 auto; margin-right: 1%; padding: 20px; padding-left: 50px; height: auto; text-align: left; } .propertydetailagentbox { flex: 1; border: 1px solid #cccccc; border-radius: 8px; margin: 0 auto; margin-left: 1%; padding: 20px; } 

 <div class="propertydetailbox2"> <div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div> <div class="propertydetailagentbox">1<br>2</div> </div> 

• 表

 .propertydetailbox2 { display: table; table-layout:fixed; border-spacing:1vw;/* or 1vw 0 or whatever you need */ width:100%; border: 1px black solid; } .propertydetailtextbox { display:table-cell; border: 1px solid #cccccc; border-radius: 8px; margin: 0 auto; margin-right: 1%; padding: 20px; padding-left: 50px; height: auto; text-align: left; } .propertydetailagentbox { display:table-cell; border: 1px solid #cccccc; border-radius: 8px; margin: 0 auto; margin-left: 1%; padding: 20px; } 

 <div class="propertydetailbox2"> <div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div> <div class="propertydetailagentbox">1<br>2</div> </div> 

• 格线

 .propertydetailbox2 { display: grid; grid-template-columns: 50% 50%; border: 1px black solid; } .propertydetailtextbox { border: 1px solid #cccccc; border-radius: 8px; margin-right: 1%; padding: 20px; padding-left: 50px; height: auto; text-align: left; } .propertydetailagentbox { border: 1px solid #cccccc; border-radius: 8px; margin-left: 1%; padding: 20px; } 

 <div class="propertydetailbox2"> <div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div> <div class="propertydetailagentbox">1<br>2</div> </div>