Question

I have a panel having divs in the following order

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

My content gets the scrollbar if the content overflows. I have a maximise button to maximise the panel. So when I maximise the panel I add the following css class.

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

But then I get the browsers scrollbar and the contents scrollbar as well.
Please help!!!
Thank you in advance.

Answer 1

This is usually because of padding, border or margin, so try setting these to 0 first.

Widths and heights are both calculated before padding and border is applied. If this is a percentage, the overall width of your div would be 100% of the page + any padding or border.

You can tell the browser to calculate these percentages widths after padding and border is applied using the box-sizing CSS property.

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

However this doesn’t work in all browsers. You may need the vendor-specific properties too.