Positioning and Stretching

Child Element
Child Element
Container outlined in yellow
html:
<div id="parent">
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>
	
css:
#parent {
  height: 300px;
  position: relative;
}

.child {
  height: 100px;
}

#container {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
}

Javascript:
onload=function() {

  var container = document.getElementById("container");
  var divWidth = container.offsetWidth;
  var divHeight = container.offsetHeight;
	
  container.style.height = divHeight + "px";
  container.style.width = divWidth + "px";
  container.style.right = 0;
  container.style.bottom = 0;

}
	

This method tries to get the container to stretch to all 4 edges by setting the top, bottom, right, and left vales to 0.

Setting margin: auto on the container causes each opposite margin to be equal, centering the container in the parent

The height of the container is unknown and dynamic. Javascript is used to get and set the value.

For some reason when all 4 values of top, right, bottom, and left are set in the css, Javascript records the height and width of the container as that of the parent. Because of this only top and left are set to 0 in the css and Javascript is used to set the bottom and right.

Note: This method assumes the height of the parent element and each child element is fixed and known. However, the number of child elements is unknown and the total height of child elements is dynamic.

Additional styles not related to the above have been used to make this demo more presentable.