Stylesheet for a fullscreen Web Page

Height 100% even on html tag

Description

A few CSS style settings for making a fullscreen website page.

Audience

You are interested in a fullscreen web page.

Code - CSS settings

It is just a matter of setting height to 100% and that for even the html tag. You never have to configure css on the html tag except this one case. The case of fullscreen requires setting the height to be 100% on the html and body tags. The body will have default margins that you will want to remove by setting them to 0. You will also want to create your own additional div at 100%. You can use a background image on that div or child img node as follows. An img node defaults to display:inline which will have a default margin. If it is the first child it's margin will overflow through it's parent. You can set the parent to overflow:hidden or set the img to display:block as follows.

html { height: 100% ; }

body { height: 100% ; margin: 0 ; }

#fullscreen { height: 100% ; width: 100% ; }

#fullscreen > img {

display: block ;

height: 100% ; width: 100% ;

}

Demo

fullscreen