Setting body height to 100%

问题

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?

回答1:

You can use viewport height.

height: 100vh

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

回答2:

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.

回答3:

Try to achieve using javascript:

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

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

回答4:

Body Height to 100%

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

回答5:

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;
    }

来源：https://stackoverflow.com/questions/34591106/setting-body-height-to-100

标签

html

css

height