Question

我在使用twitter模式显示的div中使用twitter bootstrap v2.2.2 API的标签功能（再次，引导程序的v2.2.2）。问题是，当我这样做时，模式对话框会随着标签的更改而改变形状和大小。

我一直在尝试通过查询这些选项卡窗格并将外部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中的任何属性总是为零或为零。我尝试了“this”的以下属性......

clientHeight
clientWidth
scrollHeight
scrollWidth
innerHeight
innerWidth
outerHeight
outerWidth
style.height
style.pixelHeight
offsetHeight

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

有没有人有任何进一步的想法，我可能会达到我想要的。我确信它可以完成，因为我知道JQuery.dialog可以自动调整对话框内容的大小（包括与JQuery.tabs结合使用时），但是我现在太快了，现在需要更改twitter bootstrap。

感谢。

Answer 1

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

Answer 2

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

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

2 个答案: