CSS: second <div> doesn't get scrollbar
I am making a small website. The background is filled with a painting, say a map. On the right there is an inscription over the image. The overlay has a title and a list below it.
Now I can't get the list to get the scrollbar if it's too big to fit on the screen.
I don't want the page to scroll: the background fills the screen 100%. I don't want the full overlay to scroll (comment out the first CSS comment to get this). I also don't know the size of the header beforehand - if I knew that it would be easy (just comment out the second comment in the CSS and hey presto, it works). I can go a long way and look at javascript the size of the title bar, but I would prefer a simple CSS / html solution.
Any ideas?
code:
<html>
<style>
div {
font-size:1.5em;
padding:10px;
background-color:green;
}
html, body {
height:100%;
margin:0;
}
.panels {
position:fixed;
top:50px;
right:50px;
bottom:50px;
/* overflow:auto; */
}
.list {
/* position:absolute;left:10px;right:10px;top:150px;bottom:20px; */
background-color:white;
overflow:auto;
}
</style>
<div class='panels'>
<div class='header'>Some title or other</div>
<div class='list'>
<ul>
<li>Entry</li>
...lots of entries...
<li>Entry</li>
</ul>
</div>
</div>
</html>
JSFiddle: http://jsfiddle.net/95ajc0us/
Add height: 100% for the second div.
.list {
background-color:white;
overflow:auto;
height:100%;
}
DEMO
scroll
missing as you have fixed
panel
, which will prevent scrollingdiv
you need fix
header
, notlist
.header{
position:fixed;
width:100%;
top:0;
}
demonstration
final edit (updated fiddle on Suresh Ponnukalai's answer)
If you want more entries to appear in the list, the list must scroll down.
Just write down:
ul{
overflow:scroll;
height: 200px;
}
for your UL (unordered list)
Please do not hesitate to ask again that we are not on the same page. Thanks to
you have set the position of the html and body.
instead, fix the position of the header
.header{
position:fixed;
width:100%;
left:0;
top:0;
}
link
You need to adjust the top and bottom level properties to your liking:
div
{
font-size:1.5em;
padding:10px;
background-color:green;
}
html, body
{
height:100%;
margin:0;
}
.panels
{
position:fixed;
top:50px;
right:50px;
bottom:50px;
}
.list
{
position:absolute;
left:10px;
right:10px;
top:150px;
bottom:20px;
background-color:white;
overflow-y:scroll;
}