Menu icon Foundation
100% height column

Hi everybody!

I have two centered columns and both have content at the top.
The columns have a different background color and I would like them to stretch to the bottom of the viewport.
My problem is that the columns ends where the content ends.

In the css I have tried setting html and body to 'height 100%' and wrapping the columns in a 100% height div but it doesn't work.

I've been able to do this on a non-responsive site, but can't seem to get it to work with foundation.

Any help is much appreciated!

Screen1

Screen2

100%heightdivcolumn

Hi everybody!

I have two centered columns and both have content at the top.
The columns have a different background color and I would like them to stretch to the bottom of the viewport.
My problem is that the columns ends where the content ends.

In the css I have tried setting html and body to 'height 100%' and wrapping the columns in a 100% height div but it doesn't work.

I've been able to do this on a non-responsive site, but can't seem to get it to work with foundation.

Any help is much appreciated!

Screen1

Screen2
James Gehring almost 6 years ago

I created an example for you http://cdpn.io/vxJCL hope this helps.

Brandon Arnold almost 6 years ago

This is another method, using min-height: with a VH (viewport height) attribute.

http://cdpn.io/zHyxo

James Gehring almost 6 years ago

Nice @Brandon, didn't think of that.

hector_sapien almost 6 years ago

Thx guys!

Elles pallin almost 4 years ago

This same happens to my website where whenever i tried to stretch the image width it automatically covers the two left and right width. Is there ant possibility that i can increase the Height keeping the width same. For reference This the Page @ http://www.xtreemsolution.com/cakephp-development.html

James Gehring almost 4 years ago

Not sure what your problem is, can you be more clear? The reference page use bootstrap so not sure what I am looking at to solve your problem.

James Gehring almost 4 years ago

Can you be a little more clear on your problem? The reference you gave uses bootstrap.

Elles pallin almost 4 years ago

Hey James i got your message regarding the Brief discussion. Let me explain it further actually the thing is i want the image in the post to be increases in Height while remaining the width same. hope this helps.