jquery - 如何让一个元素始终占据其父元素的特定百分比，即使在调整浏览器大小时也是如此？

Question

注意:我知道 elem {height: 90%} 存在。

我需要什么:

• 无论大小如何，一个元素占据其父元素的 x% 宽度和 y% 高度
• 父级有边距和填充

我的问题:

• 起初看起来不错，但是当我缩小浏览器窗口时，内容开始从父级的底部溢出。 这太令人沮丧了。在我看来，#load div 的大小是其父级 的 90%(按要求；请参阅下面的样式表);不幸的是，这 90% 没有考虑边距或填充。 这是怎么回事？如果答案只是当有边距/填充时百分比不会“那样”工作，我如何指定一个元素占据其元素的 x%扣除边距/填充后的父项？此外，请注意 jQueryui 使用我希望尽可能避免接触的 css。

我的标记:

<div id="tabscontainer">
      <div id="tabs">
        <ul>
            <li><a href="#create">Create</a></li>
            <li><a href="#load">Load</a></li>
        </ul>
 <div id="create">
something or other
 </div>
 <div id="load">
... there is a lot of content here ...
 </div>
</div>

<script>

$(document).ready(function() {$("#tabs").tabs();});

</script>

我的造型:

html, body {
    height: 100%;
}

#tabscontainer {
    height: 95%;
}

#tabs {
    height: 100%;
}

#tabs > div {
    height: 90%;
    overflow: auto;
}

此外，选项卡的默认 jQuery 样式有效(我没有更改)。

Answer 1

我认为问题在于 jQuery UI 的样式在 PX 中，而其余的在 % 中。当你把它们结合起来时，你通常会遇到问题。尝试以 % 设置边距、填充和边框(我知道你不想弄乱 jQuery CSS，但你可以用 !important 或类似的方法覆盖它)。