Question

我正在制作一个购物车，左手边的主要手续在单独的盒子里，一个在另一个下面，然后在右手边我有一个薄的列我想要额外推荐的产品。我希望这个右手侧柱的高度调整到与其他div的高度相等，所以它们在底部排列为页脚。所有的div都是相关的位置，没有设置高度，因此当它们中的内容发生变化时，整个批次会相应调整，因为你添加了更多的产品等。是否有一个公式我可以用来计算任何给定的div的总高度指出并使那个高度成为正确div的高度？

编辑：

现在我有一个新问题，页脚不再位于其他div下方，我的可调高度白框在背景中也没有延伸到这些？添加的js如下所示，也来自Tim：）

     <div class="height-wrapper">
        <div id="yourcartbox" class="height">
            content<br>content<br>content
        </div>
        <div id="yourdetailsbox" class="height">
            content<br>content<br>content
        </div>
        <div id="paymentbox" class="height">
            content<br>content<br>content
        </div>
        <div id="paynowbox" class="height">
            content<br>content<br>content
        </div>
     </div>
     <div id="reccomendedproductsbox" class="rightcolumn>
            content<br>content<br>content
     </div>
     <div id="checkoutfooter"></div>

这是新请求的css：）

    .box {
       width: 678px;
       position: relative;
       border: 1px solid #dde2e6;
       margin-left: 10px;
       padding: 20px;
       margin-bottom: 10px;
    }
    .height-wrapper {
       float: left;
       position: relative;
    }
    .rightcolumn {
       float: left;
       position: relative;
    }
    #checkoutfooter {
       width: 1024px;
       height: 130px;
       position: relative;
       margin-left: 10px;
       border: 1px solid #26323b;
       background-color: #37434f;
    }

enter image description here

Answer 1

我为你创建了JS Fiddle。

您可以在加载时获得左列的高度，并使用jQuery .height()将其设置在右列上。只需将div .height中的div包含在一个带有.height-wrapper类的div中，你就应该好了。

$(window).on('load', function () {

  target = $('.height-wrapper').height();
  $('.rightcolumn').height(target);

});

Answer 2

我对你的css进行了一些更改，即在左栏中添加一个包装并向左浮动列。不需要javascript。

<强> fiddle

body {min-width:1000px}

.leftcolumn{float:left; width: 500px;}

#reccomendedproductsbox {
       width: 336px;
       float: left;
       border: 1px solid #dde2e6;
       margin-left:20px;
       padding: 20px;
       margin-bottom: 10px;
}

#yourcartbox {


       border: 1px solid #dde2e6;
       margin-left: 10px;
       padding: 20px;
       margin-bottom: 10px;
}

#yourdetailsbox {

       border: 1px solid #dde2e6;
       margin-left: 10px;
       padding: 20px;
       margin-bottom: 10px;
}

#paymentbox {

       border: 1px solid #dde2e6;
       margin-left: 10px;
       padding: 20px;
       margin-bottom: 10px;
}

#paynowbox {

       border: 1px solid #dde2e6;
       margin-left: 10px;
       padding: 20px;
       margin-bottom: 10px;
}

使用jquery将左div的高度与右div匹配

2 个答案: