开发者

Expand a relative positioned element to full container height

开发者 https://www.devze.com 2022-12-24 12:54 出处：网络

I have a div directly under the body. My HTML looks like this: <body> <div class=\"parent\"></div>

相关专题：css

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:

.开发者_JS百科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.

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;