没有浏览器滚动条的高度为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; }

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

Answer 2

使用

overflow-x:hidden; 
overflow-y:hidden; 

隐藏滚动条。