为什么 $(someElement).height() 永远不会为我正确计算高度？答案

【问题标题】：Why does $(someElement).height() never calculate the height correctly for me?为什么 $(someElement).height() 永远不会为我正确计算高度？
【发布时间】：2015-12-04 18:15:11
【问题描述】：

我有一个程序

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 像素。这是为什么呢？

【问题讨论】：

试试 outerHeight() - 包括填充或 outerHeight(true)，也包括边距。 api.jquery.com/outerheight
创建具有足够 css 的演示来复制问题

标签： javascript jquery css algorithm responsive-design

【解决方案1】：

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

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

jQuery height() 与 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

【讨论】：

你能解释一下你的答案是什么吗？引入为什么这会回答问题的要点，然后提供链接以供参考。该链接将来可能会中断/腐烂，然后您的答案就不再有用了...
我已经编辑了你的答案，所以它的格式是固定的，可以直接回答问题——一旦同行评审，你应该会看到它。请注意如何以这种方式将格式应用于您未来的问题和答案:)
@StevenAnderson 我是新来的，所以...谢谢！

【解决方案2】：

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

【讨论】：