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移至两行时，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

您可以为此使用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;
}

Answer 2

您可以使用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();
});

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

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

如何匹配2格的高度

2 个答案: