CODEWITHSUNDEEP
htmlcsstwitter-bootstrapheight
Amiel M
Amiel M

Reputation: 57

How to make child div height same as parent div height

What I'm trying to make is that as the user adds more items in the cart, the cart's height will be adjusted to fit the content until it stops adjusting when it reaches the max height of the screen. It can't be more or less than the height of the screen. Currently the code we have works for screens that has smaller height, however when the height of the screen is larger the height falls short.

The item list is another div inside the cart div which will become scrollable once the cart div reaches the max height of the screen. Does anyone know how to make this possible?

<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;
}

Upvotes: 0

Views: 72

Answers (1)

Văn Quyết
Văn Quyết

Reputation: 2526

Child div need to be absolute to match the parent height:

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

Upvotes: 1

Related Questions