为什么$(someElement).height()从来没有正确地为我计算高度

Why does $(someElement).height() never calculate the height correctly for me?

本文关键字：计算 高度 正确地 height someElement 为什么 从来没有      更新时间：2023-09-26

我有一个程序

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像素。为什么呢?

您应该考虑.height()和.outerHeight()之间的区别

这是一个很好的链接，祝你好运!

jQuery height() vs outerHeight()

.height ()

获取匹配元素集合中第一个元素的当前计算高度。不包括内边距、边框和边距。

.outerHeight ([includeMargin])

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

"includeMargin"是一个可选的布尔值，表示是否在计算中包含元素的边距。

// 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

在你的代码中加入normalize.css后，height的值变成整数。您可以在jsFiddle的示例中看到，我还隐藏了.row之外的所有parentSelector。注意，我看到最后你的代码错过了关闭标签</div>，也许这是一个复制粘贴错误，但要小心。

相关文章：