html - 高度为 100% 且没有浏览器滚动条的 Div

Question

我有一个面板，其 div 的顺序如下

<div id="portlet" class="ui-widget-content">
     <div id="header" class="ui-widget-header"> ....</div>
     <div id="content"> ... </div>
</div>

如果内容溢出，我的内容会出现滚动条。我有一个最大化按钮来最大化面板。因此，当我最大化面板时，我添加以下 css 类。

.maximise {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    left: 0px !important;
    top: 0px !important;
    z-index: 1 !important;
 }

但随后我也得到了浏览器滚动条和内容滚动条。 请帮忙!!! 预先感谢您。

Answer 1

这通常是由于内边距、边框或边距造成的，因此请先尝试将它们设置为 0。

宽度和高度都是在应用内边距和边框之前计算的。如果这是一个百分比，则 div 的总宽度将为页面的 100% + 任何内边距或边框。

您可以告诉浏览器使用 box-sizing 应用填充和边框之后计算这些百分比宽度CSS 属性。

.maximise { box-sizing: border-box; }

但是，这并不适用于所有浏览器。您可能还需要特定于供应商的属性。