html - 如何使子div高度与父div高度相同

Question

我想做的是，当用户在购物车中添加更多商品时，购物车的高度将调整以适合内容，直到它达到屏幕的最大高度时停止调整。它不能大于或小于屏幕的高度。目前，我们的代码适用于高度较小的屏幕，但是当屏幕高度较大时，高度就会不足。

元素列表是购物车 div 内的另一个 div，一旦购物车 div 达到屏幕的最大高度，它就会变得可滚动。有谁知道如何做到这一点？

<div class="menu-desktop-cart order d-lg-none d-xl-block offset-md-4 col-lg-3 offset-lg-0 rounded-menu  position-relative">
                <div class="card rounded-menu order-list" style="display: block;">
  <h4 class="px-4 d-none d-md-block cart-label">YOUR ORDER</h4>
  <div class="floating-initial-hover">
    <div class="cart-header-separator"></div>
  </div>
  <div class="floating-initial-item-options">
    <div class="floating-quantity float-left pl-1">
      <button class="minus-quantity"><img src="/themes/orderup/default/assets/images/icon-minus-gold-modal.png"></button>
      <button class="plus-quantity"><img src="/themes/orderup/default/assets/images/icon-plus-gold-bold.png"></button>
    </div>
    <div class="floating-del float-right">
      <button class="btn-edit" style="display: none;"><img src="/themes/orderup/default/assets/images/icon-checklist-gold.png"></button>
      <button class="btn-del"><img src="/themes/orderup/default/assets/images/icon-trash.png"></button>
    </div>
  </div>
  <div class="item-list container d-none d-md-block">
  <div class="row item cart-item no-gutters position-relative" data-item-id="14" data-item-pos="0">
    <div class="itemcontent"></div>
    <div class="floating-item-options" style="display:none">
      <div class="floating-quantity float-left pl-1">
        <button class="minus-quantity"><img src="/themes/orderup/default/assets/images/icon-minus-gold-modal.png"></button>
        <button class="plus-quantity"><img src="/themes/orderup/default/assets/images/icon-plus-gold-bold.png"></button>
      </div>
      <div class="floating-del float-right">
        <button class="btn-del"><img src="/themes/orderup/default/assets/images/icon-trash.png"></button>
      </div>
    </div>
    <div class="col-md-2">
      <h6 class="m-0">1 x</h6>
    </div>
    <div class="col-md-7">
      <h6 class="text-left m-0 name">Garden Salad </h6>
    </div>
    <div class="col-md-3">
      <h6 class="text-right">$8</h6>
    </div>
    <div class="col-md-12 extras text-left">

  <div class="row no-gutters">
    <p class="col-md-7 offset-md-2 size text-left">Regular</p>
  </div>
</div>
  </div>
  <div class="item-divider"></div>

  <div class="row item cart-item no-gutters position-relative" data-item-id="15" data-item-pos="1">
    <div class="itemcontent"></div>
    <div class="floating-item-options" style="">
      <div class="floating-quantity float-left pl-1">
        <button class="minus-quantity"><img src="/themes/orderup/default/assets/images/icon-minus-gold-modal.png"></button>
        <button class="plus-quantity"><img src="/themes/orderup/default/assets/images/icon-plus-gold-bold.png"></button>
      </div>
      <div class="floating-del float-right">
        <button class="btn-del"><img src="/themes/orderup/default/assets/images/icon-trash.png"></button>
      </div>
    </div>
    <div class="col-md-2">
      <h6 class="m-0">1 x</h6>
    </div>
    <div class="col-md-7">
      <h6 class="text-left m-0 name">Greek Salad </h6>
    </div>
    <div class="col-md-3">
      <h6 class="text-right">$10</h6>
    </div>
    <div class="col-md-12 extras text-left">

  <div class="row no-gutters">
    <p class="col-md-7 offset-md-2 size text-left">Regular</p>
  </div>
</div>
  </div>
  <div class="item-divider"></div>

  <div class="row item cart-item no-gutters position-relative" data-item-id="16" data-item-pos="2">
    <div class="itemcontent"></div>
    <div class="floating-item-options" style="">
      <div class="floating-quantity float-left pl-1">
        <button class="minus-quantity"><img src="/themes/orderup/default/assets/images/icon-minus-gold-modal.png"></button>
        <button class="plus-quantity"><img src="/themes/orderup/default/assets/images/icon-plus-gold-bold.png"></button>
      </div>
      <div class="floating-del float-right">
        <button class="btn-del"><img src="/themes/orderup/default/assets/images/icon-trash.png"></button>
      </div>
    </div>
    <div class="col-md-2">
      <h6 class="m-0">2 x</h6>
    </div>
    <div class="col-md-7">
      <h6 class="text-left m-0 name">Rocket &amp; Parmesan Salad </h6>
    </div>
    <div class="col-md-3">
      <h6 class="text-right">$10</h6>
    </div>
    <div class="col-md-12 extras text-left">

  <div class="row no-gutters">
    <p class="col-md-7 offset-md-2 size text-left">Regular</p>
  </div>
</div>
  </div>
  <div class="item-divider"></div>

  <div class="row item cart-item no-gutters position-relative" data-item-id="17" data-item-pos="3">
    <div class="itemcontent"></div>
    <div class="floating-item-options" style="">
      <div class="floating-quantity float-left pl-1">
        <button class="minus-quantity"><img src="/themes/orderup/default/assets/images/icon-minus-gold-modal.png"></button>
        <button class="plus-quantity"><img src="/themes/orderup/default/assets/images/icon-plus-gold-bold.png"></button>
      </div>
      <div class="floating-del float-right">
        <button class="btn-del"><img src="/themes/orderup/default/assets/images/icon-trash.png"></button>
      </div>
    </div>
    <div class="col-md-2">
      <h6 class="m-0">4 x</h6>
    </div>
    <div class="col-md-7">
      <h6 class="text-left m-0 name">Burrata Salad</h6>
    </div>
    <div class="col-md-3">
      <h6 class="text-right">$10</h6>
    </div>
    <div class="col-md-12 extras text-left">

  <div class="row no-gutters">
    <p class="col-md-7 offset-md-2 size text-left">Regular</p>
  </div>
</div>
  </div>
  <div class="item-divider"></div>

  <div class="row item cart-item no-gutters position-relative" data-item-id="28" data-item-pos="4">
    <div class="itemcontent"></div>
    <div class="floating-item-options" style="">
      <div class="floating-quantity float-left pl-1">
        <button class="minus-quantity"><img src="/themes/orderup/default/assets/images/icon-minus-gold-modal.png"></button>
        <button class="plus-quantity"><img src="/themes/orderup/default/assets/images/icon-plus-gold-bold.png"></button>
      </div>
      <div class="floating-del float-right">
          <button class="btn-edit"><img src="/themes/orderup/default/assets/images/icon-checklist-gold.png"></button>
        <button class="btn-del"><img src="/themes/orderup/default/assets/images/icon-trash.png"></button>
      </div>
    </div>
    <div class="col-md-2">
      <h6 class="m-0">2 x</h6>
    </div>
    <div class="col-md-7">
      <h6 class="text-left m-0 name">Garlic Pizza</h6>
    </div>
    <div class="col-md-3">
      <h6 class="text-right">$10</h6>
    </div>
    <div class="col-md-12 extras text-left">

  <div class="row no-gutters">
    <p class="col-md-7 offset-md-2 size text-left">Regular </p>
  </div>
</div>
  </div>
  <div class="item-divider"></div>

  <div class="row item cart-item no-gutters position-relative" data-item-id="29" data-item-pos="5">
    <div class="itemcontent"></div>
    <div class="floating-item-options" style="">
      <div class="floating-quantity float-left pl-1">
        <button class="minus-quantity"><img src="/themes/orderup/default/assets/images/icon-minus-gold-modal.png"></button>
        <button class="plus-quantity"><img src="/themes/orderup/default/assets/images/icon-plus-gold-bold.png"></button>
      </div>
      <div class="floating-del float-right">
          <button class="btn-edit"><img src="/themes/orderup/default/assets/images/icon-checklist-gold.png"></button>
        <button class="btn-del"><img src="/themes/orderup/default/assets/images/icon-trash.png"></button>
      </div>
    </div>
    <div class="col-md-2">
      <h6 class="m-0">1 x</h6>
    </div>
    <div class="col-md-7">
      <h6 class="text-left m-0 name">Nutella Pizza </h6>
    </div>
    <div class="col-md-3">
      <h6 class="text-right">$14</h6>
    </div>
    <div class="col-md-12 extras text-left">

  <div class="row no-gutters">
    <p class="col-md-7 offset-md-2 size text-left">Regular</p>
  </div>
</div>
  </div>
  <div class="item-divider"></div>

  <div class="row item cart-item no-gutters position-relative" data-item-id="30" data-item-pos="6">
    <div class="itemcontent"></div>
    <div class="floating-item-options" style="">
      <div class="floating-quantity float-left pl-1">
        <button class="minus-quantity"><img src="/themes/orderup/default/assets/images/icon-minus-gold-modal.png"></button>
        <button class="plus-quantity"><img src="/themes/orderup/default/assets/images/icon-plus-gold-bold.png"></button>
      </div>
      <div class="floating-del float-right">
          <button class="btn-edit"><img src="/themes/orderup/default/assets/images/icon-checklist-gold.png"></button>
        <button class="btn-del"><img src="/themes/orderup/default/assets/images/icon-trash.png"></button>
      </div>
    </div>
    <div class="col-md-2">
      <h6 class="m-0">1 x</h6>
    </div>
    <div class="col-md-7">
      <h6 class="text-left m-0 name">Garlic Bread</h6>
    </div>
    <div class="col-md-3">
      <h6 class="text-right">$4</h6>
    </div>
    <div class="col-md-12 extras text-left">

  <div class="row no-gutters">
    <p class="col-md-7 offset-md-2 size text-left">Single Size </p>
  </div>
</div>
  </div>
  <div class="item-divider"></div>

  <div class="row item cart-item no-gutters position-relative" data-item-id="31" data-item-pos="7">
    <div class="itemcontent"></div>
    <div class="floating-item-options" style="">
      <div class="floating-quantity float-left pl-1">
        <button class="minus-quantity"><img src="/themes/orderup/default/assets/images/icon-minus-gold-modal.png"></button>
        <button class="plus-quantity"><img src="/themes/orderup/default/assets/images/icon-plus-gold-bold.png"></button>
      </div>
      <div class="floating-del float-right">
          <button class="btn-edit"><img src="/themes/orderup/default/assets/images/icon-checklist-gold.png"></button>
        <button class="btn-del"><img src="/themes/orderup/default/assets/images/icon-trash.png"></button>
      </div>
    </div>
    <div class="col-md-2">
      <h6 class="m-0">1 x</h6>
    </div>
    <div class="col-md-7">
      <h6 class="text-left m-0 name">Pizza Bianca </h6>
    </div>
    <div class="col-md-3">
      <h6 class="text-right">$10</h6>
    </div>
    <div class="col-md-12 extras text-left">

  <div class="row no-gutters">
    <p class="col-md-7 offset-md-2 size text-left">Regular </p>
  </div>
</div>
  </div>
  <div class="item-divider"></div>

  <div class="row item cart-item no-gutters position-relative" data-item-id="32" data-item-pos="8">
    <div class="itemcontent"></div>
    <div class="floating-item-options" style="">
      <div class="floating-quantity float-left pl-1">
        <button class="minus-quantity"><img src="/themes/orderup/default/assets/images/icon-minus-gold-modal.png"></button>
        <button class="plus-quantity"><img src="/themes/orderup/default/assets/images/icon-plus-gold-bold.png"></button>
      </div>
      <div class="floating-del float-right">
          <button class="btn-edit"><img src="/themes/orderup/default/assets/images/icon-checklist-gold.png"></button>
        <button class="btn-del"><img src="/themes/orderup/default/assets/images/icon-trash.png"></button>
      </div>
    </div>
    <div class="col-md-2">
      <h6 class="m-0">1 x</h6>
    </div>
    <div class="col-md-7">
      <h6 class="text-left m-0 name">Herb Pizza </h6>
    </div>
    <div class="col-md-3">
      <h6 class="text-right">$10</h6>
    </div>
    <div class="col-md-12 extras text-left">

  <div class="row no-gutters">
    <p class="col-md-7 offset-md-2 size text-left">Regular </p>
  </div>
</div>
  </div>
  <div class="item-divider"></div>
</div>
  <div style="bottom:0;">
  <div class="fees p-3" style="display: none;">
    <div class="fees-header d-none d-md-block" role="button" data-toggle="collapse" data-target=".feesCollapse" aria-expanded="false">
      <span class="d-flex w-100">        
        <div class="fees-icon font-weight-bold"><i class="ou-icon ou-ic-down"></i></div>
        <h6 class="fees-label font-weight-bold">FEES &amp; CHARGES</h6>
        <h6 class="fees-amount ml-auto">$0.00</h6>
      </span>
    </div>
  </div>

  <div class="coupons collapse pl-2 feesCollapse">
    <p class="cart-desk-fee-item fee-item">
      <span class="d-flex">
        <span class="cart-desk-fee-label">Subtotal</span>
        <span class="cart-desk-fee-total ml-auto cart_subtotal">$136</span>
      </span>
    </p>
    <p class="cart-desk-coupon">
      <span class="d-flex">
        <span class="cart-desk-total-label">Coupon Code: <span class="coupon-code"></span></span>
        <span class="cart-desk-total-value coupon-amount ml-auto"></span>
      </span>
    </p>
    <span class="fee_breakdown"></span>
  </div>
  <div class="w-100 coupon-container">
    <div class="input-group">
      <div class="coupon-icon-container">
          <i class="ou-icon ou-ic-coupon coupon-icon"></i>
      </div>
      <span class="btn rounded-circle coupon-status coupon-valid" style="display: none;">
        <i class="ou-icon ou-ic-tick coupon-check"></i>
        <div class="coupon-amount"></div>
      </span>
      <span class="btn rounded-circle coupon-status coupon-invalid" style="display: none;">
        <i class="ou-icon ou-ic-error"></i>
      </span>
      <input type="text" placeholder="Enter Coupon Code" class="w-100 my-2 grey-roundrect coupon_code">
    </div>
  </div>

  <div class="total pt-3">
    <div class="d-md-none checkout-icon">
      <div class="icon-circle-order rounded-circle bg-white p-1 ml-2">
          <img src="/themes/orderup/default/assets/images/icon-lock-checkout.png">
      </div>
      <div class="item-num-circle rounded-circle position-absolute">
        <span class="item-num font-weight-bold">1</span>
      </div>
    </div>
    <h5 class="d-none d-md-block total-label">TOTAL</h5>
    <h5 class="total-amount">$136</h5>
    <h5 class="font-weight-bold d-md-none checkout-btn position-absolute text-left">
      <i class="ou-icon ou-ic-securiy checkout-icon"></i>CHECKOUT
    </h5>
  </div>

  <div class="btn-checkout mx-4 d-none d-md-block">
    <button type="button" class="btn-rect btn-modal btn-modal-secondary button-one btn-checkout bg-gold-gradient">
      <div class="checkout-container row justify-content-center">
        <i class="ou-icon ou-ic-security checkout-icon my-auto float-left"></i>
        CHECKOUT
      </div>
    </button>
  </div>
   <div class="payments-accepted d-none d-md-block">
    <p class="pt-4 m-0 font-weight-bold font-italic">We accept payment by</p>
    <div class="payment-logos col-12 py-3 px-3 justify-content-center">
      <div class="col-3 payment-method amex" style="display: block;"></div>
      <div class="col-3 payment-method mastercard" style="display: block;"></div>
      <div class="col-3 payment-method visa" style="display: block;"></div>
      <div class="col-3 payment-method paypal"></div>
      <div class="col-3 payment-method cash" style="display: block;"></div>
    </div>
  </div>
  </div>
</div>

<div class="card rounded-menu empty-cart" style="display: none;">
  <h4 class="px-4 pt-4 font-weight-bold d-none d-md-block cart-label cart-empty">YOUR ORDER</h4>
  <div class="cart-empty-image-container">
    <img class="cart-empty-image" src="/themes/orderup/default/assets/images/cart-bg.png">
  </div>
  <p class="cart-empty-text">What you order will appear here.</p>
</div>

<div class="card rounded-menu empty-cart-closed" style="display: none;">
  <div class="cart-empty-closed-image-container">
    <img class="cart-empty-image" src="/themes/orderup/default/assets/images/store-closed2.png">
  </div>
  <div class="cart-empty-closed-text">
    <p class="closed-text">Online ordering is currently closed.</p>
    <p class="closed-text">Feel free to pre-order for later.</p>
  </div>

</div>


<script id="cart-item" type="text/x-handlebars-template">
  <div class="row item cart-item no-gutters position-relative" data-item-id="{{id}}" data-item-pos="{{pos}}">
    <div class="itemcontent"></div>
    <div class="floating-item-options" style="{{show_qty_options}}">
      <div class="floating-quantity float-left pl-1">
        <button class="minus-quantity"><img src="/themes/orderup/default/assets/images/icon-minus-gold-modal.png"></button>
        <button class="plus-quantity"><img src="/themes/orderup/default/assets/images/icon-plus-gold-bold.png"></button>
      </div>
      <div class="floating-del float-right">
        {{#if has_edit}}
          <button class="btn-edit"><img src="/themes/orderup/default/assets/images/icon-checklist-gold.png"></button>
        {{/if}}
        <button class="btn-del"><img src="/themes/orderup/default/assets/images/icon-trash.png"></button>
      </div>
    </div>
    <div class="col-md-2">
      <h6 class="m-0">{{qty}} x</h6>
    </div>
    <div class="col-md-7">
      <h6 class="text-left m-0 name">{{name}}</h6>
    </div>
    <div class="col-md-3">
      <h6 class="text-right">${{price}}</h6>
    </div>
    <div class="col-md-12 extras text-left">
    </div>
  </div>
  <div class="item-divider"></div>
</script>

<script id="child-item" type="text/x-handlebars-template">
  <div class="row  child-item py-2 no-gutters" data-item-id="{{id}}">
    <div class="col-sm-2">
      <h6 class="m-0">{{qty}} x</h6>
    </div>
    <div class="col-sm-7">
      <h6 class="text-left m-0 name">{{name}}</h6>
    </div>
    <div class="col-sm-3">
      <h6 class="text-right">${{price}}</h6>
    </div>
    <div class="col-sm-12 extras text-left">
    </div>
  </div>
</script>

<script id="cart-extra" type="text/x-handlebars-template">
  <div class="row no-gutters">
    <p class="col-md-2 offset-md-2 modifier">{{modifier}}</p>
    <p class="col-md-4 offset-md-1 text-left">{{name}}</p>
    {{#if price}}
    <p class="col-md-3 text-right">+${{price}}</p>
    {{/if}}
  </div>
</script>

<script id="cart-size" type="text/x-handlebars-template">
  <div class="row no-gutters">
    <p class="col-md-7 offset-md-2 size text-left">{{size}}</p>
    {{#if price}}
    <p class="col-md-3 text-right">+${{price}}</p>
    {{/if}}
  </div>
</script>

<script id="fee_item" type="text/x-handlebars-template">
  {{#if price}}
  <p class="fee_item">
    <span class="d-flex">
      <span class="modal-cart-total-label">{{name}}</span>
      <span class="modal-cart-total-value ml-auto">+${{price}}</span>
    </span>
  </p>
  {{/if}}
</script>
            </div>

CSS:

.sticky .menu-desktop-cart .order-list {
    max-height: 100%;
    height: fit-content;
}
.sticky .order .item-list {
    max-height: 30vh;
}

.order .item-list {
    height: fit-content;
    overflow-y: scroll;
    overflow-x: hidden;
    box-shadow: inset 0px -5px 14px -10px #5f5f5f;
    padding: 0;
    overflow: scroll;
}

Answer 1

子 div 需要是 absolute 以匹配父高度:

.parent-div {
    position: relative;
}
.parent-div > .child-div {
    position: absolute;
    height: 100%;
}