Question

我有两个div，但我希望它们的高度相等。左div具有动态内容，可以随任意数量的内部div垂直扩展。右div有一个内部div，它需要保持在顶部，并且无论向下滚动多少都可以看到。请看这个codepen

#shipping_policies {
    border: 1px solid #000000;
    padding: 5px;
}

#shipping_policies a {
    display: block;
    font-size: .9em;
    text-decoration: underline;
}

.checkout .card-header {
    background-color: #f2f2f2 !important;
}

.checkout button {
    color: #000;
    font-size: 0.6em;
}

.square1 {
    height: 100px;
    width: 100px;
    background-color: red;
    line-height: 100px;
    text-align: center;
}

.square1 p {
    color: #FFFFFF;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container mt-5 h-auto">
  <div class="" style="">
    <div class="col-6 border-danger float-left d-inline-block mr-1" style="background-color: #ffffff;">
      <div style="width: 150px;" class="py-2 d-inline">
        <div class="float-left">
          <img src="https://via.placeholder.com/228x150" alt="" class="mt-2 mb-5" /><br>
          <a class="mt-4" style="border-radius: 0; width: 150px; margin-bottom: 10px;" id="del-item" href="#">X REMOVE</a>
        </div>
        <div class="float-left ml-3 mt-1">
          <p class="px-0 mb-0">short_desc</p>
          <p class="px-0 mb-0">UOM</p>
          <label for="quantity" style="margin-bottom: 0; font-weight: bold; margin-top: 20px;">QTY</label><br>
          <input type="text" class="quantity" name="quantity" value="1">
        </div>
      </div>
      <div style="position: absolute; right: 10px; bottom: 1px;">
        <p class="mb-0" style="font-weight: bold; font-size: 1.1em; color: #990000;">$399.99</p>
      </div>
    </div>
    <div class="col-6 border-danger float-left d-inline-block mr-1" style="background-color: #ffffff;">
      <div style="width: 150px;" class="py-2 d-inline">
        <div class="float-left">
          <img src="https://via.placeholder.com/228x150" alt="" class="mt-2 mb-5" /><br>
          <a class="mt-4" style="border-radius: 0; width: 150px; margin-bottom: 10px;" id="del-item" href="#">X REMOVE</a>
        </div>
        <div class="float-left ml-3 mt-1">
          <p class="px-0 mb-0">short_desc</p>
          <p class="px-0 mb-0">UOM</p>
          <label for="quantity" style="margin-bottom: 0; font-weight: bold; margin-top: 20px;">QTY</label><br>
          <input type="text" class="quantity" name="quantity" value="1">
        </div>
      </div>
      <div style="position: absolute; right: 10px; bottom: 1px;">
        <p class="mb-0" style="font-weight: bold; font-size: 1.1em; color: #990000;">$399.99</p>
      </div>
    </div>
  </div>
  <div class="" style="">
    <div class="col-4 border-danger float-left ml-4" style="background-color: #f2f2f2; border-radius: 4px;">
      <div class="w-100 mt-2">
        <span>Subtotal</span>
        <p class="float-right">$399.99</p>
      </div>
      <div class="w-100 mt-4">
        <h4 style="font-weight: bold; margin-bottom: 0">Estimated Total</h4>
        <p class="float-right" style="font-size: large; font-weight: bold;">$399.99</p>
        <p class="" style="font-size: smaller">Tax Calculated at Checkout</p>
      </div>
      <hr style="height: 2px; color: #000; background: #000;" />
      <div class="w-100">
        <input class="w-100" style="height: 40px;" type="text" id="promo" name="promo" placeholder="Enter Promo Code" />
        <button style="position: absolute; right: 8%; bottom: 34%; background-color: #0066CC; color: #FFFFFF;">Apply Now</button>
      </div>
      <hr style="height: 5px; color: #000; background: #0066CC;" />
      <a class="w-100 mb-2 btn" style="background-color: #febd69;" href="http://groves.local/product/checkout">CHECKOUT</a>
    </div>
    <div class="float-right" style="margin-right: 15%; margin-top: 2%; width: 340px;">
      <h5 style="font-weight: bold;">Shipping &amp; Policies</h5>
      <div id="shipping_policies">
        <a href="#">Shipping</a>
        <a href="#">Policies</a>
      </div>
    </div>
  </div>
<div>

到目前为止，我一直在获得此代码段，在此不胜感激。

Answer 1

固定使用位置。固定位置使它即使用户向上或向下滚动也可以使元素停留在指定位置。

Answer 2

将.fixed和position:fixed类添加到应保留在一个位置的元素上，还修复了html布局。参见https://codepen.io/anon/pen/joYmvV?editors=1100

更新：您也可以添加position:sticky而不是position:fixed-这样会产生很好的效果。查看更新后的代码https://codepen.io/anon/pen/joYmvV?editors=1100

无论页面高度如何，都使div停留在一个地方

2 个答案: