Clever Geek Handbook

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/

+3


source to share


5 answers


Add height: 100% for the second div.

 .list {
    background-color:white;
    overflow:auto;
    height:100%;
  }


DEMO

+1


source


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)

0


source


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

0


source


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

0


source


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


source






More articles:


All Articles