Setting body height to 100%

Question

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?

100% height = window size , But when you get scroll that is more the 100%. Currently its working as expected but your requirement is different. — Help, Jan 04 '16 at 12:31
Possible duplicate of [CSS Div stretch 100% page height](http://stackoverflow.com/questions/712689/css-div-stretch-100-page-height) — Vucko, Jan 04 '16 at 12:32
Possible duplicate of [Make body have 100% of the browser height](http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height) — Lalji Tadhani, Jan 04 '16 at 12:33
Possible duplicate of [How to Auto Resize Website Body Based On Resolution?](http://stackoverflow.com/questions/34372832/how-to-auto-resize-website-body-based-on-resolution) — Bilal Rafique, Jan 04 '16 at 12:50
Please don't refer to your site. That link may be dead or changed tomorrow helping no one in the future. You can insert images here. All markup should also be placed here: [mcve] In addition, you speak of a "brown bar" but I have yet to see it. — Rob, Sep 08 '17 at 17:41

M4R1KU · Answer 1 · 2017-06-28T06:11:39.927

9

You can use viewport height.

height: 100vh

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

edited Jun 28 '17 at 06:11

answered Jan 04 '16 at 16:08

M4R1KU

710
7
22

score 7 · Answer 2 · edited Jan 04 '16 at 12:32

7

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.

edited Jan 04 '16 at 12:32

Vucko

20,555
10
56
107

answered Jan 04 '16 at 12:31

Lara

2,821
7
39
72

score 0 · Answer 3 · edited Sep 08 '17 at 17:37

0

Body Height to 100%

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

edited Sep 08 '17 at 17:37

Giacomo1968

25,759
11
71
103

answered Jan 04 '16 at 12:39

Umer Farooq

583
3
17

score 0 · Answer 4 · answered Jan 04 '16 at 12:44

0

Try to achieve using javascript:

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

In yourclassname also use yourID, give it to parent div.

answered Jan 04 '16 at 12:44

Himanshu Vaghela

1,089
11
21

score 0 · Answer 5 · answered May 12 '18 at 15:20

You can also use table property here, for cross-browser support.

    html {
    width:100%;
    height: 100%;
    display: table;
    }

    body {
        width:100%;
        display:table-cell;
    }

    html, body {
        margin: 0px;
        padding: 0px;
    }

Setting body height to 100%

5 Answers5

Linked