Question

I have two-column layout with a header and footer. I have created a JSFilddle with demonstrating this.

The left-column will normally have more content than the right-column.

1. How can I get the right-column to expand to the height of the left column, or just fill the height of the view-port? I have sene examples of something similar, but not with a footer that is always at the bottom of the display.

2. How can I get the textarea to fill the height of its parent, the right column (I haven’t even got close to solving this one).

Answer 1

I’ve just edited your jsfiddle.

1. The idea is to set a min-height on your right column block, and have it determining the height of the whole content section instead of inheriting height attribute from its parent.

2. Secondly, regarding the text-area. This bit is tricky, you need to use javascript to render it upon everytime a user resize their view port, and update the attribute height of the textarea accordingly.

Cheers

• minHeight is important incase you have an empty content container and you dont want the footer to be pushed up right under the nose of the header. Hence minheight prevent that from happening. Once the height of the right column exceeds minHeight, the parent div will be expanded accordingly.

• I see nothing wrong with h being the height of the viewport if you really want it to always expand full windows. However I recommend using $(window).innerHeight instead of Height(). But again, this is javascript and your code will never render the same thing on different browsers, so keep that in mind 🙂

  $(window).resize(function() { var h = $(window).height(); $(‘#MyTextarea’).css(‘height’, h-300); });