Scrolling only content div, others should be fixed - html

Question

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 can not use it corectly. How can I do this? I will be thankfull for every kind of answer.
body {
width: 100%;
height: auto;
padding: 0;
margin: 0px auto;
font-family: Calibri, Georgia, Ubuntu-C;
font-size: 16px;
margin-bottom: 20PX
}
#header{
width: 100%;
height: 139px;
background-image: url('images/Header_grey.gif');
}
#left_side {
width: 210px;
height: 700px;
background-image: url('images/Left_side.gif');
background-repeat:repeat-y;
overflow:hidden;
position:absolute;
font-size: 16px;
}
#content {
height: auto;
padding: 20px;
margin-left: 230px;
margin-right: 20px;
padding-bottom: 30px
}
<div id="header">
</div>
<div id="left_side">
</div>
<div id="content">
</div>

Answer 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 */
}

Answer 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

Answer 3

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

Answer 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;
}

Answer 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;

Answer 6

#left_side{
...
overflow:auto;
}
Set also a padding-right to create a space between div's inner content and scrollbar

Answer 7

As an learning exercise, I decided to update the answer by using CSS3 Flexbox. I also tried to more closely match the layout that jstorm31 was attempting to create.
Ritabrata's answer is the correct one: If you want a specific element to have scroll bars, you need to set its height (and/or width) to a fixed size and overflow to auto.
Code also to be found here: Plunker
style.css
#header{
overflow: hidden;
background-color: #880016;
height: 50px;
border-bottom: 4px solid black;
padding: 10px;
font-size: 20px;
}
#side_and_content {
display: flex;
}
#left_side{
flex: 1;
overflow:hidden;
background-color: #ED1B24;
height: 200px;
border-right: 2px solid black;
padding: 10px;
}
#content{
flex: 5;
overflow: auto;
background-color: #FF7F26;
height: 200px;
border-left: 2px solid black;
padding: 10px;
}
index.html
<div id="header">
header header header header header header
</div>
<div id="side_and_content">
<div id="left_side">
left side left side left side left side left side
</div>
<div id="content">
CSS3 Flexbox Concepts:
Flexbox consists of flex containers and flex items.
A flex container is declared by setting the display property of an element to either flex
(rendered as a block) or inline-flex (rendered as inline).
Inside a flex container there is one or more flex items.
Note: Everything outside a flex container and inside a flex item is rendered as usual.
Flexbox defines how flex items are laid out inside a flex container.
Flex items are positioned inside a flex container along a flex line.
By default there is only one flex line per flex container.<br>
It is also possible to change the direction of the flex line.
If we set the direction property to rtl (right-to-left), the text is drawn right to left, and also the flex line changes direction, which will change the page layout
</div>
</div>