ansaurus

Question

Answer 1

A:

The idea is to have the 30px on an element other than the height 100% element since the margin and the 100% add together to create the final element height (and: 100% + 30px > 100%). By putting a padding on a containing div, you can get the same effect.

Try this.

<div id="container">
<div id="sidebar">
  <ul>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
  </ul>
</div>
</div>

div#container {
    padding-top:30px;
}
div#sidebar {
    width:148px;
    height:100%;
    overflow:auto;
}

Joel Potter 2009-03-30 16:07:34

Perhaps the problem lay elsewhere for me. The same problem is occurring using your solution. This is under IE7 unfortunately.

Kezzer 2009-03-30 16:13:08

Answer 2

A:

As Joel said, margin + height add together, so you should use a container.

Also, bear in mind any possible outer margins or paddings. This should work perfectly (tested on IE7 + Opera 10), provided you don't have any other markup bothering there:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;

     <style type="text/css">
      html, body{
       height: 100%;
       padding: 0;
       margin: 0;
      }
      .container {
       padding-top: 30px;
       width:148px;
      }
      #sidebar{
       margin: 0;
       width:148px;
       height:100%;
       overflow:auto;
       background: red;
      }
     </style>

    </head>
    <body>
     <div class="container">
      <ul id="sidebar">
       <li>...</li>
      </ul>
     </div>
    </body>
</html>

Seb 2009-03-30 16:17:49

ansaurus

tags:

views:

answers:

Overflow:Auto With Margins

related questions