100% Height For Body And Its Child Elements

I am specifying a background color for the body which displays up to a certain distance only. I need it to be full height and for its child elements too. One of its child elements

Solution 1:

Remove height:100% from your body and html style.

Instead of having a border set to the left container, try setting the border on the content container instead.

your css would be something like:

.large-9.columns.right_side{border-left:1px solid #333;}

the left column is currently set to 100% and renders correctly. the problem is that it doesnt take into account the overflow content you cannot see, until you scroll. The other solution would be to absolute or fixed position the left container, and set its top and bottom values to 0.

css for that would be something like:

.left_side.full_height{position:fixed;top:0;bottom:0;width:200px;}

Here's a really basic layout with a fixed left column - http://jsfiddle.net/WAJtk/

and a version with a fixed header too - http://jsfiddle.net/WAJtk/1/

you might also like this pen - http://codepen.io/lukeocom/pen/KqAfG

Solution 2:

You could use absolute position and setting top and bottom:

body {
     position: absolute;
     top: 0;
     bottom: 0;
}