Updated 16 September 2016

This website proposes a standardised structure for a website that has:

• A page area that covers at least the entire height of the page except for a footer area
• A footer area that is intuitively pushed down as the page size increases
• A fixed or normal header
• Responsive page width

Below the standard HTML page structure is presented that corresponds to the structure of this webpage. The inlined CSS represents that CSS that never changes, while the CSS file represented below is the same as the CSS that has been inlined within this page's head section, which determines site-specific details such as colours, font styles, widths, etc.

Note this page layout has also been designed so that you don't need to manually change the z-index of sections of page. Therefore, the page header is placed at the very bottom of the body element.

As of 16 Sep 2016, the structure has been slightly changed to remove the explicit 'page-width' DIV and incorporate it within the 'page' DIV. The reason for this change is so that the 'footer' DIV may be either full width, or the same width as the page, depending on need.

{body id='body' style='min-height:100vh;margin:0;overflow-y:scroll;'}
	{div id='body-content' style='min-height:100vh;'}
		{div id='page' style='margin-left:auto; margin-right:auto;position:relative;'}
		{/div}
		{div id='footer'}
		{/div}
	{/div}
	{div id='modal-bg'}
	{/div}
	{div id='header'}
	{/div}
{/body}

Body

It is important that the minimum height of the BODY element is set to the full size of the window by setting the min-height as "100vh" -- vh is a new unit that corresponds to the vertical height of the window. I like to also set the 'overflow-y' value to scroll so that there is a consistent page width.

DIV#body-content represents the entire background area of the page. Its min-height is also set to 100vh and its background colour should be set to something appropriate.

DIV#body-content will usually contain two child elements:

• DIV#page, contains the content of the webpage; and
• DIV#footer contains the footer.

Page

DIV#page contains all of the main content of the web page. Typically, the background of the page element will be white or some other light colour.

DIV#page is responsible for setting the width and height of the default web site page-content area. This element also needs to have its min-height set to 100vh minus whatever the height of the footer will be. If a "long form" type website with wide sections is desired, this DIV's max-width should be either left as the default 100%, or another wide value; in contrast for a standard (responsive) page the max-width can be set to a more reasonable value. This element's position is set to relative so that its width is respected by child elements. Also, the left and right margins of the element are set to auto so that it is centered in the page.

A key aspect of this method of page layout is that the white "page" has a min-height that is 100% of the body's height minus the height of the gutter at the bottom of the page.

#page
{
	...
	min-height:calc(100vh - 60px);	
	...
}

Footer

The footer does not contain any enforced styling. Generally, the only issue to be considered with the footer is that its height needs to be subtracted from the minimum height of the DIV#page.

Customised CSS

The following sections describe how the CSS in the HEAD section affects the page. As previously stated, this CSS is expected to be different depending upon the needs of each website, while the inlined CSS discussed above should be the same for every website.

BODY

The CSS for the BODY element simply specifies the font for the website, as well as the default background colour and font colour.

BODY
{
	font-family:helvetica;

	background:#555;
	color:#333;
}

DIV#page

The CSS for the #page element:

1. Sets the sizing model to border box (so that the specified height includes the padding).
2. Sets the min-height to 100vh minus the size of the footer.
3. Sets the width of the page to 1000px (for responsive sites this width would be specified using media queries.
4. Sets the background of the page to white.
5. Give the page a box shadow.
6. Specifies the padding for the internal page content.

#page
{
	box-sizing:border-box;
	min-height:calc(100vh - 60px);
	max-width:1000px;
	background:white;
	box-shadow: 0px 2px 15px #333;
	padding:110px 50px;
}

DIV#footer

Due to the footer being fairly simple text centered vertically, the CSS sets the margins to zero, makes the background transparent, the colour gray, and sets the width to 1000px to match the page. The line-height of the text is set to 60px so that the height of the footer corresponds to the height removed from the minimum height of #page.

#footer
{
	box-sizing:border-box;
	margin:0 auto;
	background:transparent;
	color:gray;
	line-height:60px;
	padding:0 50px;
	width:1000px;
}

DIV#header

Be default, the header spans the entire width of the page. The CSS fixes it in place and provides the header with a height of 60px an makes the background red. A box shadow adorns the header to make it appear to hover over the page. The colour of the font is set to white and the font weight is made bold.

#header
{
	position:fixed; /* fixed or absolute */
	box-sizing:border-box;
	height:60px;
	box-shadow: 1px 1px 15px #000;
	padding:20px 50px;

	color:white;
	font-weight:bold;
	background:red;
}

PRE

The CSS for the PRE element simply provides the styling required for this site's preforatted text boxes.

PRE
{
	margin:0;
	border:solid 20px #eee;
	padding:20px;
	text-align:left;
	overflow-x:auto;
}

Potential Issues

The biggest problem with this page structure is that some mobile browsers do not support the CSS 'calc' command, and so therefore cannot calculate a minum height of 100vh - 60px.

HTML Page Structure