View Full Version : Using negative margins (or something else?) to fill available height

Nov 7th, 2010, 06:58 PM
what i'm trying to do seems simple enough, but isn't turning out that way.

lets say i have a page background of some color (e.g., orange).

then i have a main container div that is centered with auto margins, and has a white background.

i want this main container to start at 100px from the top (so 100px of orange shows above it), and the white background should expand to the bottom of the page - without scrollbars. if i set it's height to 100%, the 100px top margin is added to the 100% height of its parent (body + html), so it acts as if there's 100px of substance beneath the viewport and therefor shows scrollbars.

i had assumed a negative bottom margin set for the same amount as the top margin would work, but alas it does not.

obviously i don't want to just force-hide scrollbars by overflow:hidden or position:asbolute/fixed - if content in the container forces it to expand, it should do that. otherwise, even if there's very little content - or even none - it should expand to the bottom of the page.

i've attached a very basic (non-working) example - any insight would be appreciate.

i'm less interested in a working version than i am for the concept - i'm sure this is something that is dealt with commonly by people who do CSS full time - i'm most interested in understanding the "best-practice" in this case.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >

<style type="text/css">
html {
height : 100%;
body {
margin : 0;
background : #F90;
height : 100%;
div.wrapper {
margin : 100px auto -100px auto;
width : 500px;
background : #FFF;
height : 100%;



<div class="wrapper">




Nov 7th, 2010, 08:08 PM
Hello big-momo,
I like this method of doing a full height layout (http://nopeople.com/CSS/full-height-layout/index.html).

Nov 8th, 2010, 01:42 AM
thanks for the link excavator. looks like they're using negative margins as well - not sure what i'm doing wrong exactly. i'll take a closer look. thanks again