DIV to fill browser height?

[motionphi]

I’m trying to get the shorter content pages of my site to fill the vertical height of the browser with the background colors of the DIV (#f6f6f6 and #fff)

I’ve tried “height: 100%;”, “max-height: 100%;”, and “height: 100vh;” but nothing seems to do the trick - or it does, but then it breaks the layout on the longer content pages.

An example of the shorter page (the #333 background shouldn’t be visible below the content, only on the right and left sides of a browser > 1280px):
http://motionphi.com/v6/am.html

An example of the longer page (the way I want the shorter page to look):
http://motionphi.com/v6/ampv1.html

Any help is much appreciated!

DS

[John_Betong]

Take a look at this site because there are numerous demo “2 column” example pages with detailed explanations on how to do specific tasks.

http://www.pmob.co.uk/temp/3colfixedtest_4.htm

If you have any problems then I am sure they can be answered in the forum.

[PaulOB]

@motionphi

I’ve tried “height: 100%;”, “max-height: 100%;”, and “height: 100vh;” but nothing seems to do the trick - or it does, but then it breaks the layout on the longer content pages.

If you set a height then that height will never be exceeded (i.e. content will overflow). You need to set a min-height and then content can grow.

e.g.

.main {height:auto;min-height:100vh}

Or use display:table and then height automatically becomes a minimum.

Remember that when using 100% you will get a full 100% so the element can’t be nested some way down the page as it will either lose its height (when not using vh) or you will get 100% from where you are which will end miles below the fold.

Some older versions of Chrome still need html,body set to 100% even when using vh units. To support all browsers back to IE8 I would simply use this.

html,body{height:100%}
.main {min-height:100%;height:auto}

[motionphi]

Paul - that worked perfectly, thank you!