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

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).