fit wrapper to 100% width and height

2018-07-02 01:44:39

I would like to create a div which fits the full height and width of the browser viewport. I just thought about simple css like:

#wrapper { width: 100%;
           height: 100%;
           background-color: red;
}

but it does not work for the height. The #wrapper does not have any height. Why?

Thanks in advance.

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: red;
}

http://fiddle.jshell.net/zDuWh/

html, body { height: 100% }

#wrapper {
    width: 100%;
    height: 100%;
    background-color: red;
}

http://fiddle.jshell.net/VJv6h/

How about this:-

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: red;
}

html { height: 100% }
body { height: 100% }

链接地址: http://www.djcxy.com/p/89410.html