tags:

views:

41

answers:

1

Hi,

I have a div directly under the body. My HTML looks like this:

<body>
 <div class="parent"></div>
</body>

And the css I use is this:

.parent {
  border:1px solid black;
  bottom:10px;
  position:relative;
  top:100px;
  width:500px;
}

This div doesnt stretch to the entire viewport/available body height. However, if I change the position to absolute, It does stretch.

Is there a way to get a relative positioned element to stretch to its container element height. I tried height 100% as well and it works but it gives a vertical scrollbar to me as the element is positioned at 100px from TOP.

+2  A: 

The terms top, bottom, left and right are generally used for absolute positioning. If you want a div container to be as big as it's parent's container, then you have to specify through the terms height and width, and use a percentage or integer with a measurement scale attached such as 'px'. If you are worried about a scrollbar, just use the rule overflow:hidden;

Scarface
-1 for this solution as you could accidentally hide text that would otherwise have been readable by scrolling down.
Shawn