Geek Answers Handbook

Div stretch page height 100% regardless of content

live (work in progress) site

In fact, I have all the contents of my site centered inside a div that has a specified width and an estimated height of 100%, regardless of the actual length of the content. I specified height:100%; for html , body and #main however, the div still does not work, as can be seen on this page - I do not want them to be any gap between the gray #main field and the bottom of the screen. Is it possible? How?

+5
source share
3 answers

see this jsfiddle

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

discussing this here too .....

correct css so that the body element fills the entire screen

+4
source

You can set position:absolute , and that should stretch it to the bottom. It seems that Opera and Chrome will work at least.

This, however, will conflict with the video player below, as well as push your copyright notice below the page. Maybe you can move the notification to a gray window?

+1
source

You can achieve in two ways:

  1. Specify "Height" to 100% if you do not know how long the page can be.

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

  2. If you know how much you need to stretch vertically, you can use the height in "vh (vertical height)".

     .yourContainerClass{ height:80vh; }

I hope this helps you.

0
source

More articles:


All Articles