Scrolling only content div, others should be fixed
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;
Admin
Updated on April 02, 2021Comments
-
Admin about 3 years
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>
-
Muhammad bin Yusrat about 7 years
height:auto
will not let the scroll bar to become visible, ever. It will rather scroll the entire page because the height will adopt based on its contents.