javascript - 如何将类 ="container"的新高度设置为数据结尾?

标签 javascript jquery css height

如何将 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/

相关文章:

javascript - 数据标签的c3js位置

jquery - 显示/隐藏 ul li onclick jquery

javascript - 屏蔽元素以成为链接的最佳方法是什么?

javascript - 幻灯片不工作?

javascript - 使用 jQuery 从字面上将文本分解到随机位置

javascript - 动态重组 HTML 表格

css - 在 Jupyter Notebook 中编辑代码和 Markdown 单元格的不同字体设置

HTML,CSS — 如何并排水平居中两个表格

javascript - 显示一周中某天的消息

javascript - 在同一上下文中具有其他 JS 函数的 Jcrop 插件