如何将 class="container"的新高度设置为数据的末尾?
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<style type="text/css">
.container {
background: green;
position: relative;
}
.absolute1 {
position: absolute;
background: red;
float: left;
width: 200px;
height: 200px;
}
.absolute2 {
position: absolute;
background: red;
float: left;
left: 210px;
width: 200px;
height: 150px;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$( document ).ready(function() {
$( ".container" ).each(function() {
var newHeight = 0, $this = $( this );
$.each( $this.children(), function() {
newHeight += $( this ).height();
});
$this.height( newHeight );
});
});
});//]]>
</script>
<div class="container">
<div class="absolute1">
Testing absoluteTesting absoluteTesting absoluteTesting absoluteTesting absolute<br />
Even more testing absolven more testing absolven more testing absolven more testing absolven more testing absolute<br />
</div>
<div class="absolute2">
Testing absoluteTesting absoluteTesting absoluteTesting absoluteTesting absolute<br />
Even more testing absolven more testing absolven more testing absolven more testing absolven more testing absolute<br />
</div>
</div>
------------------footer text------------------
最佳答案
使用 jquery .outerHeight() 函数
//上下padding和border总是包含在.outerHeight()计算中;如果 includeMargin 参数设置为 true,则边距(顶部和底部)也包括在内。
你将获得元素的新高度,然后使用 jquery 将此值设置为元素 css
关于javascript - 如何将类 ="container"的新高度设置为数据结尾?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21568096/