Как заставить страницу расширяться контентом HTML / CSS?

В основном моя страница состоит из

a) главный div, #main b) заголовок, #header c) div, #contain d) нижний колонтитул, #footer

Содержимое страницы входит в div.

Код:

#main{
    position: absolute;
    top: 0px;
    left: 15%;
    width: 70%;
    min-height: 100%;
    border: 1px solid black;

    }

    #header{
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    }

    #contain{
    position: relative;
    top: 40px;
    padding-top: 20px;
    left: 5%;
    width: 90%;
    min-height: 600px;
    border:1px solid green;

    } 


    #footer{
    width: 100%;
    height: 5%;
    bottom: 0;
    border-top: 1px dotted black;
    position: absolute;
    }

Как вы можете видеть, div содержит минимальную высоту 600 пикселей. Это правильно расширяется, когда страница заполняется, но она расширяется за нижний колонтитул и выходит из "основного" div.

Очевидно, что я хочу, чтобы нижний колонтитул оставался в нижней части главной страницы в любое время, но главное просто не расширяется в соответствии с содержимым div, даже если оно имеет минимальную высоту 100% страницы.