Question

我有一个程序

jQuery(function($){
    function makeParentHeightOfSmallestChild (parentSelector)
    {
        var parent = $(parentSelector);
        var children = parent.children();
        if (children.length < 2) return; 
        var smallestHeight = Number.MAX_VALUE;
        children.each(function(){
            var thisHeight = $(this).height();
            if (thisHeight < smallestHeight) smallestHeight = thisHeight;
        });
        parent.height(smallestHeight);
    }

    $(window).load(function(){
        makeParentHeightOfSmallestChild('#contact-page-container > .row');
    });

    $(window).resize(function(){
        makeParentHeightOfSmallestChild('#contact-page-container > .row');
    });

});

这是不言自明的。我遇到的问题是smallestHeight出现的值明显小于已经迭代计算它的元素的实际最小高度。元素是你可以在

中看到的两个元素

   <div class="container" id="contact-page-container">       
        <h1>Get in touch</h1>
        <div class="row">
            <div class="col-xxs-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <h3>Email</h3>
                <p>S,madsn sandaskldasjk laskldaskjd skajkasdkjas k</p>

                        <input type="text" value="Your Name"/>
                        <input type="text" value="Your Email Address" /> 
                        <textarea value="Your Message" rows="18">Your Message</textarea>                                   
            </div>
            <div class="col-xxs-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <h3>Address</h3>
                <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 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>
                <iframe class="same-height-as-width" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2686.2302199264063!2d-122.13376389999996!3d47.67994880000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54900d52444ba747%3A0x577e2db631b0711c!2s8620+154th+Ave+NE%2C+Redmond%2C+WA+98052!5e0!3m2!1sen!2sus!4v1441747735537" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>

当我查看Inspect Element时，高度为595.556像素和747.778像素，但不知何故，父级的高度设置为242像素。那是为什么？

Answer 1

您应该考虑.height()和.outerHeight()

之间的区别

这对你来说是一个很好的link，祝你好运！

jQuery height（）vs outerHeight（）

<强> .height（）

获取匹配元素集中第一个元素的当前计算高度。这不包括填充，边框和边距。

<强> .outerHeight（[includeMargin]）

获取匹配元素集中第一个元素的当前计算高度，包括填充，边框和可选边距。

＆＃34; includeMargin＆＃34; 是一个可选的布尔值，表示是否在计算中包含元素的边距。
// returns height of browser viewport
$(window).height(); 

// returns height of HTML document
$(document).height(); 

// returns height of "IdofYourDIV" excluding padding, border and margin
$("#IdofYourDIV").height();

// returns height of "IdofYourDIV" including padding and border but excluding margin
$("#IdofYourDIV").outerHeight(); 

// returns height of "IdofYourDIV" including padding, border and margin
$("#IdofYourDIV").outerHeight(true); 

http://princepthomas.blogspot.com.br/2011/07/jquery-height-vs-outerheight.html

Answer 2

包含到您的代码normalize.css后，高度值变为整数。我可以在jsFiddle上看到的我也隐藏所有内容的示例位于.row parentSelector以外。</div>。注意我最后看到你的代码错过了结束标记"aaabbbbccdaeeee"这可能是一个复制粘贴错误但要小心。我希望这会对你有所帮助。

为什么$（someElement）.height（）永远不会为我正确计算高度？

2 个答案:

jQuery height（）vs outerHeight（）