relative div根据内容调整到绝对定位的div高度
问题描述:
我有一个绝对定位的div在相对定位的div内。relative 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'});
});
});
答
删除“bottom:0px;”从你的CSS中的产品视图类,它会弄乱你的HTML。
-
尝试把你的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'}); }); });
-
使用“调整()”和“高度()”函数在jQuery的,所以你的最终代码会是这样:
$(document).ready(function(){ $('.product-view').height($('#mm_grid_wrapper').height() + 20); $('#mm_grid_wrapper').resize(function(){ $('.product-view').height($('#mm_grid_wrapper').height() + 20); }); });
是不是有可能使相对mm_grid_wrapper?这样父母会根据其大小自动调整大小。 – sroes 2013-03-05 14:39:26
@sroes其实我的HTML有点不对..我修改了。不,它必须是绝对的,否则它缩小到包装div的大小。 – user1475110 2013-03-05 14:52:59