Make a div fill the whole page in height

问题:

I have a page with this structure:

topbar (100% width) sidebar content

i want the sidebar to fill all the remaining space of the screen in height.

I've tried with height: 100% in my css but doesn't work.

How can i do this? There is a way to do it using css or i have to use Javascript?

回答1:

To achieve this you need make sure the sidebar's parent containers have heights of 100%, too.

So, if you have a sidebar div, you have the body container, and the html container.

html, body, #sidebar { height: 100%; }

回答2:

Have you set the height of body height to 100% too? If not it won't fill up the rest of the page.