restrict scrolling on footer

Question

I have a Html page with a menu bar created in the footer . Presently , the whole page is scrollable. How do restrict the scrolling for the footer. SO, i am looking for scrolling only on content of page .

code for the footer menu bar is as follows:

#menu-bar {
    height: 50px;
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    line-height: 10px;
    background: #F07C1F;
    z-index: 1000;
}

Answer 1

positioned elements, is what you are looking for...

http://jsfiddle.net/7fuQm/1/

#menu-bar {
    height: 50px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    line-height: 10px;
    background: #F07C1F;
    z-index: 1000;
}
#body {
    position: absolute;
    top:0px;
    bottom:50px;    
    left: 0px;   
    overflow:auto;
}
p
{
    margin: 10px;
}