jquery - 相对 div 根据内容调整到绝对定位的 div 高度

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

1. 删除“底部：0px;” 从你的css中的产品视图类，它会弄乱你的html。

2. 尝试将您的 jquerycode 放入 DOM 就绪侦听器中：

    $(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'});
        });
    });
   

3. 在 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);
        });
    });