CODEWITHSUNDEEP
javascriptcss
Gingi
Gingi

Reputation: 2304

Maximizing a child div's height within a parent div

I have a simple div setup:

<div id="container">
    <div id="title"><h4>Title</h4></div>
    <div id="content"></div>
</div>

The #container element is set to a fixed height. I would like to have #content us all the available height, but I haven't found a clean cross-browser way to do this. Here is the CSS:

div {
  width: 100%;
}
#container {
  height: 400px;
}
#content {
  height: 100%;
}

But this results in #content having the same height as #container and overflows its parent.

A live example can be seen at http://jsbin.com/amekah/2/edit.

I should note that I'm writing a JavaScript library that appends the #content div to an input div element (#container in this example) so I don't want to fiddle too much with the layout of either the parent element or any child elements. I don't mind using JavaScript to calculate the available height dynamically.

Upvotes: 5

Views: 16012

Answers (7)

akamaozu
akamaozu

Reputation: 705

Ridiculously easy with Javascript. I'm currently doing something like that on my current project.

  1. Get the Height of the Container: elem.offsetHeight where elem is a javascript pointer to the object. In your example this would be:

    var containerHeight = document.getElementById('container').offsetHeight.

  2. Get the Height of Child Elements in the Container: Here's a link on how to properly get childNodes. Here's what I'd do:

    var lastChild = elem.childNodes[elem.childNodes.length - 1];
var verticalOffset = lastChild.offsetTop + lastChild.offsetHeight;

Now you have the height of the container AND the vertical offset from the top of the parent to the last child plus the height of the last child.

All that's left to do is calculate the difference and assign it as the height of #content.

document.getElementById('content').style.height = (containerHeight - verticalOffset) + "px";

EDIT: Proof of Concept

Upvotes: 6

Mladen
Mladen

Reputation: 1245

Even easier if you use jQuery:

function setHeight() {
  // using outer height to get margins and padding into account,
  // see http://jqapi.com/#p=outerHeight
  var titleHeight = $("#title").outerHeight(true), 
      totalHeight = $('#container').outerHeight(true);
  $('#content').outerHeight(totalHeight - titleHeight);      
}
// start on document.ready
$(function() {
  setHeight();
});

Upvotes: 1

Anthony
Anthony

Reputation: 599

#content actually has the same height as #container except that it overflows with #container because #title already eats some % of #container's height. You could try positioning your elements.

div {
  width: 100%;
}
#container {
  background: #FEE;
  height: 400px;
  position: relative;
}
#title {
  border: 1px dotted green;
  position: relative;
  z-index: 1; /* if you don't want #content overlapping with this element */
}
#content {
  border: 1px dotted green;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

Upvotes: 0

Gingi
Gingi

Reputation: 2304

I found a way to get #content to use the remainder of the available height:

#container { display: table }
#container > div { display: table-row }

You can see it here: http://jsbin.com/amekah/32/

I'm still not happy with it because it potentially changes other CSS elements that table rows don't have (like a border).

Upvotes: 0

Sandi Hrvić
Sandi Hrvić

Reputation: 221

If you don't mind using fixed height for your title element you can easily achieve this. The first step is to make the #container position relative, and then content can have absolute position with bottom set to 0 and top set to height of your title (see demo).

Upvotes: 0

Johnbabu Koppolu
Johnbabu Koppolu

Reputation: 3252

What about sharing the available container's height between title and content?

#container {
  background: #FEE;
  height: 400px;
}
#title {
  border: 1px dotted green;
  height : 20%;
}
#content {
  border: 1px dotted red;
  height: 80%;
}

Upvotes: 1

ProfileTwist
ProfileTwist

Reputation: 1554

The overflow issues is caused by the 100% declaration for the #content div. Take this property out.

If you would like the #content div to have 100% height WHILE overlapping the title div then you must use absolute position.

#container {
  height: 400px;
  position: relative;
}
#content {
  top: 0;
  bottom: 0;
  position: absolute;
}

Upvotes: 6

Related Questions