Div content overflow
<p>Please see a <a href="http://jsfiddle.net/bWTwL/" rel="nofollow">little demo</a> I made.</p>

<p>The problem is if I zoom out, it works fine(the slide panel's black background remains good and cover all the content). But when I zoom in, the background don't cover all of the content.and the content overflows from the background(i.e the background size remains as it was before but content size increase and half of the content comes out of that black background panel).Im also using jscrollpane so this makes things difficult for me.
I thought: <code>$(wnidow).height();</code> and <code>$(window).width() / 2;</code> but same problem occurred.</p>

<pre><code>&lt;div id="sidebar"&gt;
&lt;ul class="menu"&gt;
&lt;li&gt;&lt;a id="about" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a id="about" href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;div class="panels"&gt;
&lt;div class="panel about"&gt;
&lt;span class="close"&gt;X&lt;/span&gt;
&lt;div class="content"&gt;
    &lt;h1 class="panel-head"&gt;Home&lt;/h1&gt;
    &lt;div class="scroll"&gt;

    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt
    massa.Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla.
    Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum
    id, viverra ac nulla.Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis
    diam, et ullamcorper massa. Nam a odio nec magna gravida congue quis nec leo. Suspendisse pellentesque, arcu nec 
    cursus luctus, magna nisi iaculis urna, quis mattis felis dolor et lectus. Integer at nunc nisi, in luctus lectus.
    In hac habitasse platea dictumst. Vivamus imperdiet ultricies nisi, vel lobortis urna adipiscing ac.
    &lt;/p&gt;

    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>and this is the css</p>

<pre><code>div#sidebar {
background:url('../images/png/bg3.png') repeat;
position: absolute;
top: 0;
width:30%;
left:0px;
height: 100%;
margin: 0;
float:right;
}

ul.menu {
padding:125px 0 0 25px;
width:308px;
display:none;
z-index:5;
}

ul.menu li a {
background:url('../images/png/bg2.png') repeat;
color:white;
padding:0 8px 3px 3px;
font-family:'Poiret One';
font-size:42px;
line-height:54px;
}
div.panel {
float:left;
  position: absolute;
  top: 0;
   width:70%;
  right:0px;
  height: 100%;
  margin: 0;
  background:url('../images/png/bg1.png') repeat;
}

.panel div.content {
width:716px;
margin:25px auto 0;
font:12px;
position:absolute;
text-align:left;
}

.scroll {
max-height:590px;
max-width:100%;
}
</code></pre>
