如何匹配2个div的高度

Question

<div class="order-summary">
  <ul>
     <li class="li-summary"><div class="summary-left">Name:</div><div class="summary-right">Ehtesham Ali</div></li>
     <li class="li-summary"><div class="summary-left">Delivery Address:</div><div class="summary-right">House 1, Street 1</div></li>              
  </ul>
</div>

summary-left 和 summary-right 的高度为 100%：我希望 summary-right 与 summary-left 的高度相匹配。

summary-left 有背景颜色，而 summary-right 没有。 li-summary 有一个边框底部。因此，当 summary-right 变为 2 行时，summary-right 上的背景颜色不会填充 100%

.order-summary{
  width: 60%;
  border: 1px solid #cccccc;
  margin: 80px auto;
  font-family: 'Lato','Open Sans','Helvetica Neue','Arial','San-serif';
  text-align: left;
  border-bottom:0;
}
.summary-left{
  width: 25%;
  float: left;
  height: 100%;
  background: #fbfbfb;
  padding: 10px;
}
.summary-right{
  overflow: hidden;
  padding: 10px 0 10px 15px;
  height: 100%;
  border-left: 1px solid #cccccc;
}
.li-summary{
  border-bottom: 1px solid #cccccc;
}

Image of the Issue

解决方案：我发现解决问题的最简单方法是添加渐变背景

.li-summary{
    background-image: linear-gradient(left, #fbfbfb, #fbfbfb 25%, transparent 25%, transparent 100%);
background-image: -webkit-linear-gradient(left, #fbfbfb, #fbfbfb 25%, transparent 25%, transparent 100%);}

Answer 1

你可以使用 jquery 来做到这一点：

// get height of left summary and set right summary to the same on page load
var summaryLeftHeight = $(".summary-left").height();
$(".summary-right").css("height", summaryLeftHeight + "px");

// add this to make sure they have the same height on page resize 
$(window).on("resize", function(){
   var summaryLeftHeight = $(".summary-left").height();
   $(".summary-right").css("height", summaryLeftHeight + "px");
});

您也可以使用 http://brm.io/jquery-match-height/ 来执行此操作： 在代码中包含 cdn

<script src="jquery.matchHeight.js" type="text/javascript"></script>

更新的 HTML（我将 class="summary" 添加到您希望具有相同高度的每个元素）：

<div class="order-summary">
  <ul>
     <li class="li-summary">
        <div class="summary summary-left">Name:</div>
        <div class="summary summary-right">Ehtesham Ali</div>
     </li>
     <li class="li-summary">
        <div class="summary summary-left">Delivery Address:</div>
        <div class="summary summary-right">House 1, Street 1</div>
     </li>              
  </ul>
</div>

并在你的js文件或脚本标签中初始化代码

$(function() {
    $('.summary').matchHeight();
});

插件默认选择高度最大的元素，但您可以通过选择选项target来选择目标，如下所示：

$(function() {
    $('.summary').matchHeight({
        target: $('.summary-left') // using summary left as the target 
    });
});

Answer 2

你可以使用 flexbox 来查看Set height of CSS flex elements to the same amount?

我用你的代码创建了一个jsfiddle，你可以自己看看。

ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

li{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
}