Scrolling Only Content Div, Others Should Be Fixed

I have three divs. I need header and left_side divs to be fixed and content div to scroll. I've been searching for solution and found something with overflow and position. But I ca

Solution 1:

overflow: auto; adds the scroll when need

#header{
    width: 100%;
    height: 139px;
    background-image: url('images/Header_grey.gif');   
    overflow: hidden;  /* code added to prevent scroll */
}
    
    
#left_side{
    width: 210px;
    height: 700px;
    background-image: url('images/Left_side.gif');
    background-repeat:repeat-y;
    overflow:hidden;  /* code added to prevent scroll */position:absolute;
    font-size: 16px;
}
#content{
    height: auto;
    padding: 20px;
    margin-left: 230px;
    margin-right: 20px;
    padding-bottom: 30px;
    overflow: auto;  /* code added */
}

Solution 2:

• at first you will need to have a fixed height for content area.
• then make overflow:auto there

ERROR in your code:: you want to have a scroll bar for a div,but you are declaring that div height as auto

you cant demand a scroll bar when the height is auto,to have scroll bar you will need to have a fixed height for that div and when the content height will be greater than div height it will introduce scroll bar automatically

NOTE: so the changes in your css will be

#content{
    height: 300px;/*..very important if you want scroll bar...*/overflow: auto; /*..will introduce scroll bar when needed..*/padding: 20px;
    margin-left: 230px;
    margin-right: 20px;
    padding-bottom: 30px
}

EXAMPLE :: FIDDLE

Solution 3:

If you want the header and left side to stay in their position while scrolling, you will have to use position:fixed

Solution 4:

You can just use position fixed. http://jsfiddle.net/Nrs2u/1/

#header {
    position: fixed;
    z-index: 2;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 10%;
    background-color: purple;
}
#side {
    position: fixed;
    z-index: 2;
    left: 0%;
    top: 10%;
    width: 10%;
    height: 90%;
    background-color: red;
}
#body {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 90%;
    height: 300%;
    background-color: orange;
}

Solution 5:

position: sticky on the element, that should stay in place when scrolling, worked for me in a similar situation. https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky

position: sticky;
top: 0px;