Creating a Full Height Page with Fixed Sidebar and Scrollable Content Area

Webpages with a fixed sidebar and a scrollable content area are quite popular. The page expands to 100% height of the screen.

Depending upon the height, both the sidebar and content may have scrollbars.

Such pages are commonly used in admin sections, documentation pages etc.

Demo

Click to see the demo page

HTML Involved

Creating such a page involves 5 container elements :

• Main outer container - this will expand to 100% of screen height
• Container to hold the sidebar - this will also expand to 100% of screen height
• Container to hold the content - also expandable to 100% of the screen height
• Container to hold the sidebar contents - this will hold the main sidebar contents
• Container to hold the main contents

<div id="container">
	<div id="sidebar">
		<div id="sidebar-content">[[ SIDEBAR CONTENTS ]]</div>
	</div><!--
--><div id="content">
		<div id="main-content">[[ MAIN CONTENTS ]]</div>
	</div>
</div>

<!-- --> is used to remove the space between the 2 inline-block elements. For more information see Fighting the Space Between Inline Block Elements.

CSS Involved

The CSS involved is quite simple. Both the sidebar and content containers are inline-block elements with height: 100% and overflow: auto.

html {
	height: 100%;
}

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

#container {
	height: 100%;
}

#sidebar {
	display: inline-block;
	vertical-align: top;
	height: 100%;
	width: 18%;
	overflow: auto;
}

#content {
	display: inline-block;
	vertical-align: top;
	height: 100%;
	width: 82%;
	overflow: auto;
}

A important thing is to set the height of html and body element as 100%. Ultimately height of a container is inherited from its parent, so if the parent is not occupying 100% of the screen height, setting the height of child as 100% won't bring anything.

html {
	height: 100%;
}

body {
	height: 100%;
}

Download Codes

Download