Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting body height to 100%

Tags:

html

css

height

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

html{
    height: 100%;
}

body{
    min-height: 100%;
}

doesn't work. I also tried to set a class for the content element and tried to set it to 100% height but that doesn't work either. How can i do this?

The brown bar is a png image and is set as a background image for a fullwidth container. So if that container is 100% high, it should work. But how?

like image 242
user3354767 Avatar asked Jan 04 '16 12:01

user3354767


People also ask

How can I make my body 100% height?

For a responsive full page height, set the body element min-height to 100vh.

What is the meaning of height 100%?

height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.

Is 100vh same as 100 %?

For example, height: 100%; applied to an element is relative to the size of its parent. In contrast, height: 100vh will be 100% of the viewport height regardless of where the element resides in the DOM.

What does width 100% do in CSS?

width: 100%; will make the element as wide as the parent container. Extra spacing will be added to the element's size without regards to the parent.


2 Answers

You can use viewport height.

height: 100vh

This means that the div or whatever is as high as the browser window.

like image 171
M4R1KU Avatar answered Oct 01 '22 19:10

M4R1KU


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 to set height 100% for every page.

like image 42
Lara Avatar answered Oct 01 '22 21:10

Lara