Question

我在相对定位的div中有一个绝对定位的div。

我需要父亲相对div来重新调整绝对div的大小（这是动态变化，具体取决于它所在的页面）

我已经读过这可以使用jquery完成，但是我无法让它工作。

这是我的......

HTML

 <div class="product-view">
<div style="float:left;">Product Image</div>
 <div class="product-shop">
<div id="mm_grid_wrapper">
<table>dynamic content</table>
</div>

CSS ...

    .product-view {
    margin-top: 5px;
    border: 1px solid #cecece;
    padding: 22px 0 0 0;
    position: relative;
    bottom:0px;


}
.product-view .product-shop {
    text-align: left;
    width: 48%;
    float: left;/*max-width: 329px;*/
}

    #mm_grid_wrapper{
position:absolute;
left:10px;
margin:0 310px 0 0;
max-width: 1630px;
top:0;
height:100%;
}


}

...的JavaScript

$(function()
{
    $('.product-view') .css({'height': (($('#mm_grid_wrapper').height()) + 20)+'px'});

    $('#mm_grid_wrapper').bind('resize', function(){
        $('.product-view') .css({'height': (($('#mm_grid_wrapper').height()) +20)+'px'});
             });
});

Answer 1

删除“bottom：0px;”从你的css中的product-view类，它会弄乱你的HTML。

尝试将您的jquerycode放入DOM ready侦听器：

 $(document).ready(function(){
    $('.product-view') .css({'height': (($('#mm_grid_wrapper').height()) + 20)+'px'});

    $('#mm_grid_wrapper').bind('resize', function(){
      $('.product-view') .css({'height': (($('#mm_grid_wrapper').height()) +20)+'px'});
     });
 });

在jquery中使用“resize（）”和“height（）”函数，所以你的最终代码将是这样的：

     $(document).ready(function(){
    $('.product-view').height($('#mm_grid_wrapper').height() + 20);

    $('#mm_grid_wrapper').resize(function(){
      $('.product-view').height($('#mm_grid_wrapper').height() + 20);
     });
 });

relative div根据内容调整到绝对定位的div高度

1 个答案: