How to set a divs height to "100%" alternative?

I have to create a div that has a paper texture to it, with rounded corners. When the content inside grows, this div should grow along with it and not ruin the bg..

So to do this, I made the main div with the content, and made it repeat the center of the bg and set the height to auto. I made a div for the top and bottom parts of it with the textures and rounded corners. I used absolute positioning开发者_如何学Python relative to the content div so when it grows, the bottom bg will be below the content div at all times.

Everything looks good BUT, the top and bottom divs are covering the content div. I can fix this by leaving a large gap at the top and bottom of the content div but it looks strange having such a large gap.. and its improper.

Any ideas around this?

Try adding a margin to the top and bottom of the content div (ie. margin: 20px 0 30px 0; where 20 is the height of your top div and 30 is the height of your bottom div). Also, can't you just put the three divs in a container and position them relatively, one stacked on another?

Example:

<div id="container">
  <div id="top"></div>
  <div id="content"></div>
  <div id="bottom"></div>
</div>

It´s hard to say without looking at your code, but I think your problem can be easily solved by adding a top and bottom padding to your main div, the size of the top and bottom parts.

Edit: An alternative would be to put your content in another div in the main div and abandon absolute positioning. Just put all three divs one after the other and use negative margins to pull the content up over the top div and do something similar for the bottom border.

Use z-index: http://www.jsfiddle.net/xPEY6/

(Per the CSS spec you don't actually need the .text div, you could set .top and .bottom to z-index: -1 and .container to z-index: 0, but I wouldn't rely on all browsers implementing that detail correctly.)

You can do this with positioning:

div.paperTexture {
    position: absolute;
    top: 0px;
    bottom: 0px;
}

Also works well if you need the div to take up 100% of the viewport minus Xpx. Just set the top or bottom to Xpx.