Height setting up to 100%

Question

I need to have the body of all my web pages (except the home page) located at http://www.zorglegal.nl to the same height (100% browser height), so the brown bar on the right is stretched to the full screen from top to bottom. How can i achieve this?

html{ height: 100%; } body{ min-height: 100%; } 

does not work. I also tried to set the class for the content item and tried to set it to 100% height, but that won't work either. How can i do this?

The brown rod is a png image and is set as the background image for a full-width container. Therefore, if this container is 100% high, it should work. But how?

Answer 1

 html, body{ margin: 0; padding: 0; min-width: 100%; width: 100%; max-width: 100%; min-height: 100%; height: 100%; max-height: 100%; } 

This Css will help you set the height to 100% for each page.

Answer 2

You can use the height of the viewport.

 height: 100vh 

This means a div or something even taller than the browser window.

Answer 3

Body height up to 100%

 html, body { width: 100%; height: 100%; } 

Answer 4

Try using javascript:

 $(window).bind('resize', yourclassname); 

In yourclassname also use yourID , open its parent div.