Fixed div with offset, not able to scroll to bottom - html

Question

There is a sidebar div positioned using position: fixed; and offset using top: 90px. You cannot scroll to the bottom of this div. If you set top: 0px; everything works fine.
body {
font: 76%/150% Arial, Helvetica, sans-serif;
color: #666;
width: 100%;
height: 100%;
}
#sidebar {
position: fixed;
top: 90px;
left: 0;
width: 20%;
height: 100%;
background: #EEE;
overflow: auto;
}
#content {
width: 80%;
padding-left: 20%;
}
#media screen and (max-height: 200px) {
#sidebar {
color: blue;
font-size: 50%;
}
}
<div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia libero eget mi rhoncus laoreet. In hac habitasse platea dictumst. Etiam placerat congue mi quis feugiat. Aliquam placerat sagittis consectetur. Nulla iaculis tincidunt leo vel luctus.
Pellentesque euismod tincidunt diam, quis porta erat laoreet a. Mauris pellentesque purus ac eros elementum et rutrum orci iaculis. Morbi tincidunt posuere nulla a commodo. Curabitur eu ligula diam. Pellentesque fringilla, felis in tincidunt adipiscing,
nisi eros consectetur felis, quis sollicitudin purus quam ut metus. Integer imperdiet nulla id diam ultricies ut ultricies nisl eleifend. Duis tortor tellus, laoreet nec pellentesque ut, euismod non lectus.</div>
<div id="content">Cras gravida, diam non adipiscing cursus, sapien urna adipiscing enim, at faucibus nunc felis at turpis. Aliquam erat volutpat. Nulla facilisi. Aenean nec nisi gravida ante convallis euismod sed quis odio. Sed nulla est, fringilla vel rhoncus vel, fermentum
et turpis. Curabitur eu posuere tortor. Integer sit amet nisl elit, gravida rutrum ipsum. Cras nisl est, sodales quis faucibus nec, tempus vel libero. Aliquam lobortis gravida erat, in placerat libero ultricies in. Curabitur volutpat lorem ut ligula
aliquet a fermentum augue porttitor. Vestibulum varius, purus id sollicitudin tincidunt, velit felis tincidunt erat, ut feugiat augue diam commodo lorem. Donec in augue non est tincidunt consequat. Mauris nec justo eget augue varius pulvinar id ut risus.
Donec fringilla, enim vitae tincidunt accumsan, urna elit laoreet tellus, ac gravida dolor dolor ac quam. Vestibulum dignissim felis quis tortor sollicitudin ut placerat mi adipiscing.</div>
JSFiddle
What do I have to change to keep top: 90px; and be able to scroll to the bottom?

Answer 1

The issue is that #sidebar has height: 100%;. This means that it will be the entire height of the viewport so when you offset the top by 90px the bottom of the div is cut off.
One way to get around this issue is to use calc to take away the 90px offset from the height.
Modify #sidebar changing height: 100%; to height: calc(100% - 90px);
body {
font: 76%/150% Arial, Helvetica, sans-serif;
color: #666;
width: 100%;
height: 100%;
}
#sidebar {
position: fixed;
top: 90px;
left: 0;
width: 20%;
height: calc(100% - 90px);
background: #EEE;
overflow: auto;
}
#content {
width: 80%;
padding-left: 20%;
}
#media screen and (max-height: 200px) {
#sidebar {
color: blue;
font-size: 50%;
}
}
<div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia libero eget mi rhoncus laoreet. In hac habitasse platea dictumst. Etiam placerat congue mi quis feugiat. Aliquam placerat sagittis consectetur. Nulla iaculis tincidunt leo vel luctus.
Pellentesque euismod tincidunt diam, quis porta erat laoreet a. Mauris pellentesque purus ac eros elementum et rutrum orci iaculis. Morbi tincidunt posuere nulla a commodo. Curabitur eu ligula diam. Pellentesque fringilla, felis in tincidunt adipiscing,
nisi eros consectetur felis, quis sollicitudin purus quam ut metus. Integer imperdiet nulla id diam ultricies ut ultricies nisl eleifend. Duis tortor tellus, laoreet nec pellentesque ut, euismod non lectus.</div>
<div id="content">Cras gravida, diam non adipiscing cursus, sapien urna adipiscing enim, at faucibus nunc felis at turpis. Aliquam erat volutpat. Nulla facilisi. Aenean nec nisi gravida ante convallis euismod sed quis odio. Sed nulla est, fringilla vel rhoncus vel, fermentum
et turpis. Curabitur eu posuere tortor. Integer sit amet nisl elit, gravida rutrum ipsum. Cras nisl est, sodales quis faucibus nec, tempus vel libero. Aliquam lobortis gravida erat, in placerat libero ultricies in. Curabitur volutpat lorem ut ligula
aliquet a fermentum augue porttitor. Vestibulum varius, purus id sollicitudin tincidunt, velit felis tincidunt erat, ut feugiat augue diam commodo lorem. Donec in augue non est tincidunt consequat. Mauris nec justo eget augue varius pulvinar id ut risus.
Donec fringilla, enim vitae tincidunt accumsan, urna elit laoreet tellus, ac gravida dolor dolor ac quam. Vestibulum dignissim felis quis tortor sollicitudin ut placerat mi adipiscing.</div>

Answer 2

Please change css link below.
So your DIV fix in bottom and at top automatic 90px will open.
#sidebar {
position: fixed;
bottom: 0px;
left: 0;
width: 20%;
height: calc(100% - 90px);
background: #EEE;
overflow: auto;
}