Absolutely positioned DIV does not extend to the height of the content

Question

I have a wrapper div which is positioned absolute. Is it possible to extend the height of the wrapper div to accommodate the content and show the background color. Below the code I used:

CSS

html, body {
 width: 100%;
 height: 100%;
 margin: 0px;
 padding: 0px;
 border: 0px;
}

body {
 font-family: Arial,sans-serif;
 font-size: 2em;
 line-height: 1.5em;
}

#contentbody {
 position: absolute;
 left: 5px;
 right: 5px;
 top: 5px;
 bottom: 5px;
 background-color: Green;
}

HTML

<div id="contentbody">
 <div id="content">
  <div style="height: 1500px;">some large content</div>
 </div>
</div>

Answer 1

try using style = "overflow: scroll" on your DIV

EDITED: to remoe overflow: auto

Answer 2

I don't think you should set bottom in #contentbody. By setting both top and bottom you are forcing the height of the div to be the height of the browser view-port minus 10 (top + bottom).

Answer 3

Add the overflow:hidden to your html,body selector and and overflow:auto to your #contentbody div:

        html, body {
         width: 100%;
         height: 100%;
         margin: 0px;
         padding: 0px;
         border: 0px;

         overflow:hidden; /* overflow is hidden */
        }

        body {
         font-family: Arial,sans-serif;
         font-size: 2em;
         line-height: 1.5em;
        }

        #contentbody {
         position: absolute;
         left: 5px;
         right: 5px;
         top: 5px;
         bottom: 5px;
         background-color: Green;

         overflow: auto; /* overflow is auto to allow scrolling */
        }