Question

I have a table with class=list which outputs files that are uploaded in a server and it is created dynamically using php.The table is inside another div.The code is

<div class="list">
<table>....php code for table...</table>
</div>

I have positioned the div list in a fixed position.The css file is

.list{background:#66CDAA;width:20cm;position:fixed;top:3cm;left:11cm;}

The problem is that if table gets too big the page doen’t scroll down. I have tried:

body{overflow:auto}

But it doesn’t work.
As an alernative solution I know that I could add to .list

.list{overflow:auto;height:something;}

But then the list would have a fixed height which I don’t want and also the table would scroll instead of the page.
So is there any alternative??

Answer 1

Try this:

<div class="listcontainer"><div class="list"><table>...</table></div></div>

CSS:

.listcontainer {
    position: fixed;
    width: 20em;
    top: 3cm;
    left: 11cm;
    bottom: 3cm;
    right: 11cm;
    overflow: auto;
} /* adjust right and bottom to be what the maximum size should be */
.list {
    background-color: #66cdaa;
    max-height: 100%;
}