如何使用變化的數據和頁腳來調整其內容大小的邊界

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中保存了一個測試卡號，因此只需在到期日后輸入一個日期即可，它可以讓您提前。

Answer 1

好的，給具有邊框的包裝紙分配min-height而不是高度，並添加一個屬性overflow: hidden;

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