Question

我有两个使用javascript编码的div，以便“lightpole”div扩展以匹配“LayoutColumn2”div的高度。除了在结帐页面上，它似乎在任何地方工作正常。此页面包含一些动态表单元素，一旦完成一个部分，就会展开。 lightpole div不会扩展以匹配容器形式的扩展div，即使它们位于较大的LayoutColumn2 div中。

网站：https://store-e262c.mybigcommerce.com/checkout.php?tk=eceb5394b7c03ae4a283b2eabff8f9f6

如果不起作用，请向购物车添加内容＆gt;继续结帐＆gt;选择我是新客户，继续按钮。在页脚附近可以看到灯柱断裂，如果您继续结帐，则非常明显。如果有人想要创建测试用户，我可以删除用户。

<!--make lightPole expand to height of tallest column-->
<script type="text/javascript">
    $(window).load(function(){
   var ht=($('#LayoutColumn2').height() > $('#LayoutColumn3').height()) ?
    $('#LayoutColumn2').height() : $('#LayoutColumn3').height(); $('#lightPole').height(ht); }); </script>

html很长并且会根据结帐过程中的阶段而变化，但如果有人想要，我仍然可以发布。

CSS

 #lightPole {
background:url(../images/lightPole8aSlice.png);
margin: 0 0 0 19.9px;
padding: 0;
position: absolute;
width: 15px;
z-index: -100;
 display: inline-block;
float: left;
} 

#LayoutColumn2{  
float: left;
height: auto;
margin: 0;
padding: 0;
width: 641px;

}

.Content {
background: url("../images/contentMiddleBackground.png") repeat scroll 0 0 transparent;
float: left;
font-size: 0.95em;
margin: 0;
min-height: 266.5px;
padding: 0 5px 0 28px;
width: 609px;

}

它的嵌套非常深，并且还有其他几个脚本块，所以可能其中一个导致问题......？

Answer 1

当其他div（#lighPole）更改其高度时，您的问题是调整div（#LayoutColumn2）的大小。这可以存档，例如使用jquery resize plugin。

<script type="text/javascript" src="/content/jquery.ba-resize.min.js"></script>
<script type="text/javascript">
  $(function() {
    $('#LayoutColumn2').resize(function() {
      var ht = Math.max($('#LayoutColumn2').height(), $('#LayoutColumn3').height());
      $('#lightPole').height(ht);
    }).resize();
  });
</script>

javascript div不扩展以匹配动态表单字段

1 个答案: