jquery - 如何使用不同的数据和页脚调整其内容的边框大小

Question

我正在创建一个结帐系统，并且有一个名为订单确认的部分。它的作用是显示添加到购物车的产品的简要摘要。因此尺寸会因订单而异。我在这个部分周围有一个边界，我遇到的问题是，如果有两种以上的产品，这些产品就会开始落在边界之外。我试图使包含边框的 div 具有相对位置，但边框似乎保持固定。我将边框设置为一个高度，所以我不确定这是否会导致它无法调整，但我需要将其设置为最小高度。

这是它的 html 源代码:

<div class="checkoutconfirmationcontainer">
    <div name="product_id">                                                       </div>
        <div class="orderconfirmdisplay">
            <span class="tealmedium">1 - Baseball</span><br><br><br>        
        <div class="floatleft"><div class="smallerimgcontainercheckout">
            <img class='sizedimg' src='/productpics/coming_soon.png' alt='Coming Soon'><br><br><br><br>                                                     </div></div>
        </div>
        <div class="checkoutitemsummary">
            <a href='./viewProduct.php?view_product=12'>Baseball </a>
                <p><span class="redprice">$10<br />                                                  </div>
        <div class="orderconfirmdisplay">
            <span class="tealmedium">1 - Lakers Hat</span><br><br><br>      
        <div class="floatleft"><div class="smallerimgcontainercheckout">
            <img class='sizedimg' src='/productpics/coming_soon.png' alt='Coming Soon'><br><br><br><br>                                                     </div></div>
        </div>
        <div class="checkoutitemsummary">
            <a href='./viewProduct.php?view_product=11'>Lakers Hat </a>
                <p><span class="redprice">$25<br />                                                 </div>
        <div class="orderconfirmdisplay">
            <span class="tealmedium">4 - Steamer Trunk</span><br><br><br>       
        <div class="floatleft"><div class="smallerimgcontainercheckout">
            <img class='sizedimg' src='/productpics/coming_soon.png' alt='Coming Soon'><br><br><br><br>                                                     </div></div>
        </div>
        <div class="checkoutitemsummary">
            <a href='./viewProduct.php?view_product=10'>Steamer Trunk </a>
                <p><span class="redprice">$200<br />                                                    </div>
            <div class="orderconfirmdisplay">
                <span class="tealmedium">4 - Best Tennis Ball</span><br><br><br>        
            <div class="floatleft"><div class="smallerimgcontainercheckout">
                <img class='sizedimg' src='/productpics/coming_soon.png' alt='Coming Soon'><br><br><br><br>                                                     </div></div>
            </div>
            <div class="checkoutitemsummary">
                <a href='./viewProduct.php?view_product=17'>Best Tennis Ball </a>
                <p><span class="redprice">$15<br /></span></p>
            </div>

            <input type="hidden" name="token" value="967ee4057c86e74fa799c7f569d6a127">
            <input class="widebutton placefinalorder" name="btnSubmit" id="btnSubmit" type="submit" value="Place Your Order">
        <input type='hidden' id='AuthorrizeResponseText' name='AuthorrizeResponseText' value='' />

                <br>
            </div>

这是本节主要部分的 CSS。

.confirmationinfocontainer {
    width: 61%;
    border: 1px solid #E6E6E6;
    height: 450px;
    float: left;
    position: relative;
    margin-bottom: 200px;
    padding: 15px;
}

那我的页脚不适应这个？

.footerOut {
    width: 100%;
    background-color: #202020;
    position: relative;
    padding-top: 30px;
    left: 0px;
    right: 0;
    margin-bottom: 0px;
    margin-top: 20px;
    bottom: 0px;
    clear: both;
}
.footer {
    height: 420px;
    width: 960px;
}

我不确定我做错了什么，所以我的页面会调整。如果方便的话，我的网站是 buyfarbest.com。如果您的购物车中有 4 件产品并转到我结帐的订单确认部分，可能更容易理解我的意思。 html中保存了一个测试卡号，所以只要在到期日期中输入一个 future 的日期，它就会让你前进。

Answer 1

好的，将 min-height 而不是 height 给你有边框的包装器，并添加一个属性 overflow: hidden;

.confirmationinfocontainer{   //your warpper div
      min-height: 450px;
      overflow: hidden;
}