Auto height

Auto height on parent container with Absolute/Fixed Children

by Wentz Wu

HTML

<div id="wrapper">
  <div class="left">
    <p>box1</p>
    <p>box1</p>
  </div>
  <div class="right">
    <p>box2</p>
    <p>box2</p>
    <p>box2</p>
    <p>box2</p>
  </div>
</div>

CSS

#wrapper {
  position: relative;
  margin: 0;
  background-color: blue;
  color: white;
}

.left {
  width: 30%;
  background-color: blue;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

.right {
  width: 70%;
  background-color: green;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

JavaScript

var biggestHeight = "0";
// Loop through elements children to find & set the biggest height
$("#wrapper *").each(function() {
  // If this elements height is bigger than the biggestHeight
  if ($(this).height() > biggestHeight) {
    // Set the biggestHeight to this Height
    biggestHeight = $(this).height();
  }
});

// Set the container height
$("#wrapper").height(biggestHeight);