更改父（格）高度到其子（P）的窗口后的尺寸调整

$(window).on("resize", function() { 

    var totalHeight = 0 

    var $p = $("#cwt-help").children(); 

    $p.each(function() { 
     totalHeight += $("#cwt-help").outerHeight(); 
    }); 

    $("#cwt-help").css({ "height": totalHeight }) 
});

我试图调整父格窗调整后，以匹配其孩子的身高。我遇到的问题是在调整大小之前获得高度的代码。我怎样才能得到最终的身高？谢谢！更改父（格）高度到其子（P）的窗口后的尺寸调整

来源

2017-07-07 Vaclav H.

一个'div'的自然行为扩展到封装它的内容，如果它没有明确地被赋予了大小......那么，你能不能见好就收大小关闭开始？或者，你可以给它一个'min-height'和'min-width'来定义它应该是最小的，然后让它随着它的需要而增长。最好的解决方案很大程度上取决于实际情况，这在你的问题中没有描述。 –

为什么无法使用CSS解析？ –

当resize事件发生时执行的代码...
你希望它在事件发生后执行。

那么setTimeout()呢？

我想事件后100毫秒就够了。

$(window).on("resize", function() { 

    setTimeout(function(){ 
    var totalHeight = 0 

    var $p = $("#cwt-help").children(); 

    $p.each(function() { 
     totalHeight += $("#cwt-help").outerHeight(); 
    }); 

    $("#cwt-help").css({ "height": totalHeight }); 
    },100); 
});

来源

2017-07-07 21:52:08

其实问题出在'outerHeight（）'函数中。我不知道为什么我使用它，但如果我只是使用height（）它的作品。问题解决了。虽然谢谢！ –

这似乎工作，更容易。调整窗口大小时，将高度设置为元素的scrollHeight。

$(window).on("resize", function() { 
 
    $("#cwt-help").css({ "height": $('#cwt-help').srollHeight }); 
 
});

#cwt-help{ 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="cwt-help"> 
 
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p> 
 
    
 
    <p>Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div>

来源

2017-07-07 21:56:40

更改父（格）高度到其子（P）的窗口后的尺寸调整

回答

相关问题