CSS Working With 100%

Question

Consider this jsfiddle example.

I need the content to always stretch to meet the bottom of it's parent container (which could be any height). Essentially I want it to look like this:

Answer 1

I don't think it's possible in pure CSS, if the box height and the content before it varies in height. I've put together a small Javascript which automatically adjusts the #content height depending on the height of #box and the paragraph above's height and margins.

$(document).ready(function() {
  var p = $('#box > p:first-child');
  var margin_top = p.css('margin-top').substring(0,p.css('margin-top').length-2);
  var margin_bot = p.css('margin-bottom').substring(0,p.css('margin-bottom').length-2);
  var box_height = $('#box').css('height').substring(0, $('#box').css('height').length-2);
  var p_height = p.css('height').substring(0,p.css('height').length-2);
  var content_height = box_height - p_height - margin_top - margin_bot;
  $('#content').css('height', content_height+'px');
});

JSFiddle link : http://jsfiddle.net/ueeMW/

Answer 2

Does this help?: http://jsfiddle.net/Boroso/8rXnL/ Edit: Sorry, original link was wrong.

Changing the height of the container to auto will allow for the change of height in content. Which is what I assume you are asking.

#box {
    width:300px;
    height:auto;    
    border:1px solid;
}

div.content {
    width: auto;
    height: 300px;
    background:#333;
    margin: 10px;
}

Also, you shouldn't add padding to the container because that will change the height and width of it that you'd probably like to have. Because of that I set the div.content to use a margin of 10px on all sides.

Answer 3

Why not just using less height?

Like this:

height: 85%;