如何确定尚未在页面上显示的 div 的高度答案

【问题标题】：How do I determine the height of a div that has yet to be displayed on the page如何确定尚未在页面上显示的 div 的高度
【发布时间】：2013-03-05 14:26:23
【问题描述】：

我正在使用 twitter 模态显示的 div 中使用 twitter bootstrap v2.2.2 API 的选项卡功能（同样，v2.2.2 的 bootstrap）。问题是，当我这样做时，模式对话框会随着选项卡的变化而改变形状和大小。

我一直在尝试通过询问那些选项卡窗格并将外部 div 设置为窗格遇到的最大大小和宽度来设置包装选项卡窗格的 div 的大小。问题是，无论我做什么，我似乎总是无法确定这些窗格的大小（我假设是因为它们尚未显示？）。

我的布局（大致）...

<div id="ClientEditPanel" class="modal hide" role="dialog">

  <div class="modal-header">
    <h3>Client details</h3>
  </div>

  <div class="modal-body form-horizontal">

    <ul class="nav nav-tabs">
      <li><a class="active" data-toggle="tab" href="#ClientEditPanel_Tab_Personal">Personal</a></li>
      <li><a href="#ClientEditPanel_Tab_Profile" data-toggle="tab">Profile</a></li>
      <li><a href="#ClientEditPanel_Tab_Other" data-toggle="tab">Other</a></li>
    </ul>

    <div id="ClientEditPanel_Tabs" class="tab-content">
      <div id="ClientEditPanel_Tab_Personal" class="tab-pane active">
        ...
      </div>
      <div id="ClientEditPanel_Tab_Profile" class="tab-pane">
        ...
      </div>
      <div id="ClientEditPanel_Tab_Other" class="tab-pane">
        ...
      </div>
    </div>

  </div>

  <div class="modal-footer form-actions">
    <input type="submit" class="btn btn-primary" />
  </div>

</div>

以下 CSS 进一步支持这一点...

.tab-content {
  overflow: auto;
}

.tab-content > .tab-pane, {
  display: none;
}

.tab-content > .active, {
  display: block;
}

我正在尝试按如下方式获取窗格...

$.each($(".tab-pane"), function () {
  ...
});

理论上它应该就像将父 div 的宽度设置为最宽子的宽度并将父 div 的高度设置为最高子的高度一样简单。我想测量 ClientEditPanel_Tab_Personal、ClientEditPanel_Tab_Profile 和 ClientEditPanel_Tab_Other 并在 ClientEditPanel_Tabs 上设置最大值。

通过调试，我可以确认我的选择器带回了正确的元素“this”清楚地代表了我第一次通过迭代器时的第一个选项卡。不过，在确定了这一点后，我询问的 div 的任何属性始终为 null 或零。我已经尝试过“this”的以下属性...

客户端高度
客户端宽度
滚动高度
滚动宽度
innerHeight
内宽
外部高度
外部宽度
style.height
style.pixelHeight
偏移高度

可能还有一些我没有列出的。

有没有人有任何进一步的想法可以实现我正在寻找的东西。我确信可以做到这一点，因为我知道 JQuery.dialog 可以自动调整对话框的大小（包括与 JQuery.tabs 结合使用时），但我现在无法更改 twitter 引导程序。

谢谢。

【问题讨论】：

将滚动条放在包装器上
用display:none 隐藏的元素（jQuery 通常会这样做）表现得好像它们根本不在 DOM 中，所以它们没有任何维度。必须使用另一种隐藏元素的方法（可见性、屏幕定位）才能请求尺寸。
@EL：想扩展一下吗？
@CBroe：我已经检查过了，你在 3 个“选项卡窗格”div 中的 2 个是 display:none，但是第一个窗格（也是我一直在寻找的那个） at) 是显示：块。不过还是谢谢。
你可以用overflow:hidden; 将 div 放在一个高度为零的容器中。 div 会呈现并具有尺寸，但不会影响页面。

标签： javascript layout twitter-bootstrap

【解决方案1】：

在元素以 HTML 呈现之前，不会设置元素的高度和宽度属性。您可以将容器推离页面，渲染内容，进行一些调整，然后将内容移回屏幕。根据我的个人经验，我只会渲染输出，然后在准备好文档（jQuery）时对页面进行调整。这应该很快发生，只要元素的数量相当少，我就没有注意到任何不利影响。

【讨论】：

【解决方案2】：

除非在 DOM 中，否则您无法读取维度。正如@Kalpers 建议的那样，将其渲染到视口之外（例如，附加到<body> 并具有position:absolute; top: -9999px 或附加到其他任何位置但添加visibility:hidden，然后获取元素尺寸。

【讨论】：