Jquery无法获取隐藏页脚的outerHeight答案

【问题标题】：Jquery Cannot get the outerHeight of a hidden footerJquery无法获取隐藏页脚的outerHeight
【发布时间】：2015-08-22 17:51:17
【问题描述】：

我有一个页脚，它应该根据其 outerHeight() 使用 javascript 函数自动显示，但它没有.. 调试我得到空值..

    <section class="z-index-1 pull-bottom-fixed full-width" data-pages="reveal-footer">

         <section>
            <div class="container">
             <dv class="row"></div>
             <dv class="row"></div>
           </div
         </section>

          <section>
            <div class="container">
              <div class="row"></div>
              <dv class="row"></div>
           </div>
          </section>

    </section>

这里是reveal-footer函数

    Pages.prototype.initRevealFooter = function() {
        var _elem = $('[data-pages="reveal-footer"]');
        setHeight();
        function setHeight(){
                var h = _elem.outerHeight();
                _elem.prev().css({
                     'margin-bottom':h
                })
        }
        $(window).resize(function(){
            setHeight();
        })
    }

当我检查 _elem.outerHeight() 我得到 null ...

我正在使用最新的 JQuery 版本（1.11.3）我阅读了关于 outerHeight() 的 jQuery ...

更新

在 OS X 上的 FF 和 Chrome 上的调整大小工作正常（出现滑块，我可以滚动到底部以查看页脚），但在 Safari 上却没有 ..

所以 Safari 不喜欢这段代码

Pages.prototype.initRevealFooter = function() {
    var _elem = $('[data-pages="reveal-footer"]');
    setHeight();
    function setHeight(){
            var h = _elem.outerHeight();
            _elem.prev().css({
                 'margin-bottom':h
            })
    }
    $(window).resize(function(){
        setHeight();
    })        
}

【问题讨论】：

简单原因...隐藏元素没有尺寸或页面偏移。浏览器只能测量它显示的内容
jQuery 声明：当元素或其父元素被隐藏时，.outerHeight() 报告的值不能保证准确。要获得准确的值，请在使用 .outerHeight() 之前确保元素可见。 jQuery 将尝试暂时显示然后重新隐藏元素以测量其尺寸，但这是不可靠的，并且（即使准确）会显着影响页面性能。在 jQuery 的未来版本中可能会删除这种显示和重新隐藏测量功能。

标签： jquery html dom

【解决方案1】：

如果这是您在页面上的唯一代码，而不是像@charlietfl 评论的那样 - 如果元素没有内容或样式，则没有高度..

您应该发布更多代码。

查看这支笔以获取有效的示例 -> http://codepen.io/anon/pen/jPjjYg

CSS

[data-pages="reveal-footer"]{
  height: 10px;
  background-color: lime;
}

 _g = jQuery('[data-pages="reveal-footer"]');
g.css({'border': '1px solid blue'});
var hh = g.outerHeight();  //returns 12

【讨论】：

我更新了我的问题...... js 代码在 OS X 上适用于 FF(37.0.1) 和 Chrome (44.0) 但不适用于 Safari (8.0.8)
太棒了。您应该将您的答案标记为正确。 [如果有帮助，请投票] 欢呼。

【解决方案2】：

在 Chrome、FF 和 Safari 中测试相同代码后发现问题... 工作正常 w FF 和 Chrome ，但不适用于 Safari

我修改了css...在body标签中插入了overflow:auto ...

 /*[1. Layouts] */
 html,
 body {
    height: 100%;
   overflow: auto;
 }

这解决了问题...现在可以显示页脚，html代码和js代码都没有错...只有CSS默认溢出！不知道为什么 Safari 默认为 no 和 FF/Chrome 默认为 yes

【讨论】：