Footer to the bottom of the page after min-height main area

Question

I'm currently working with a webpage and I run into a problem. I want my footer to stay at the bottom of the page, after the main area. The problem is that I want the main area to be at min-height:900px; and it will be slightly over the footer.

If I add more text to the main area it scales well, but the footer is now set to stay in margin-top:1190px; How could I get it to follow the main area if more text is added?

The page prototype is here: http://goo.gl/tu6s9

Answer 1

@user2130814 Change Your Web Page CSS Like This

#logomenu {
    display: block;
    height: 98px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    position: relative;
    right: 0;
    width: 960px;
    z-index: 3;
}
#intro {
    display: block;
    height: 198px;
    left: 0;
    margin: 0 auto;
    position: relative;
    width: 960px;
    z-index: 3;
}
#sisalto {
       background-color: #E8E8E8;
display: block;
margin: 0 auto;
min-height: 900px;
opacity: 0.9;
overflow: hidden;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
position: relative;
right: 0;
width: 900px;


 }

 #footer {
    background-image: url("images/bottom.jpg");
    clear: both;
    height: 215px;
    min-width: 1100px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 0;
}

#footersisennys {
    display: block;
    height: 145px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    position: relative;
    right: 0;
    width: 900px;
    z-index: 5;
}