html - CSS 高度 : 100% not working on inline-block element although parent div has height

Question

我有一个 div，里面有两个子 div，如下所示:

<div id="cartgrid" style="display:inline-block">
    <div class="cart-left">
        ....
    </div>
    <div class="cart-right">
        ....
    </div>
</div>

.cart-left 包含一个元素表，而 .cart-right 只有几个按钮，所以 .cart-left 总是比 .cart-right 高；父div的高度由.cart-left的高度决定。我希望 .cart-right 具有与 .cart-left 相同的高度，所以我给了它 height:100%，但即使它的 parent (#cartgrid) 有一个高度值，height:100% 什么都不做。

fiddle :https://jsfiddle.net/zjuzh07n/

Answer 1

有点脏，但这就是我要解决的问题。

#cartgrid {
  position: relative;
  display: inline-block;
}
  .cart-right {
    position: absolute;
    display: inline-block;
    right: 0;
    height: 100%;
  }

希望对您有所帮助。