2

I have a red div at a fixed position : top and bottom are fixed.

This div contains a table in which a cell contains a scrollable div, so that the content can't overflow the red div.

It looks like this on Chrome :

enter image description here

But on Firefox, the content grows and overflows out of the red box :

enter image description here

Here's my HTML :

<div id=a>
    <div id=b>
        <table id=c border=1>
            <tr><th height=20 width=20>
                <input type=button id=but value="Fill cell">
            </th><th>A</th></tr>
            <tr><th>dataname</th>
                <td><div id=val class=scrollable>cell content</div></td>
            </tr>
        </table>
    </div>
</div>

and the CSS :

#a {
   position:fixed; top:20px; left:20px; bottom:50px;width:200px;
   background:red;
}
#b { height:100%; }
#c { width:100%; height:100%; }
.scrollable {
    width:100%; height:100%;
    overflow-y:auto;
}

And here's a fiddle for the tests : http://jsfiddle.net/xusqc/

I'd suggest you test your proposal on FF before submitting an answer.

How could I fix my code to have on Firefox and IE9+ the behavior I have now on Chrome ?

Note that the height of the first line of the table may change dynamically in my application. And the solution must be applicable if my data table has more rows and cells.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • @queueoverflow it doesn't work and I don't want the scrollbar to appear when not needed anyway. – Denys Séguret Feb 14 '13 at 15:31
  • not a good practice to use div inside td, why not pass the id and class to the parent td of the div? just a suggestion – Toping Feb 14 '13 at 16:16
  • @Ark I'd love to use a better practice if it can reproduce the behavior I need (and that I have now on Chrome). The reason I have a div in my td is that a td can't be made scrollable. – Denys Séguret Feb 14 '13 at 16:18

2 Answers2

0

As I couldn't find a cross-browser pure HTML/CSS solution, I had to use some JavaScript (and jQuery but it could have been done without it if I hadn't many event handlers bound with jQuery in my cells).

The idea is to empty the cells containing a .scrollable div, compute their heights, refill the cells then set the heights as fixed.

Here's the function I wrote :

function resetScrollableHeights(){
    $sp = $('.scrollable').closest('td'), heights = [], contents = [];
    $sp.each(function(){
        $(this).css('height', 'auto'); // without this, window shrinking would be badly handled
        contents.push($('.scrollable', this).detach());  // let's empty all scrollables
    });
    $sp.each(function(){ //now store the heights
        heights.push($(this).height());
    });
    $sp.each(function(){ // refill the scrollables and fix the heights
        $(this).append(contents.shift()).css('height', heights.shift());
    });
}

The function is called when the window is resized :

$(window).resize(resetScrollableHeights);

And it must also be called when the content of a .scrollable div changes.

I tested it on Chromium/Ubuntu, Chrome/Android, Firefox/Ubuntu and IE9/Win7. As it's useless on WebKit based browsers where I hadn't any bug with pure HTML/CSS it could be deactivated with some detection but I prefer my code to be free from browser detection.

Demonstration

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
-1
  1. Change the <td> to <td class="scrollwrap">, the one that contains your target div.
  2. Update your CSS:

:

 .scrollwrap { position:relative; }
 .scrollable {
     position:absolute; width:100%; height:100%; top:0; left:0; right:0; bottom:0;
     overflow:auto;
 }

But be aware:

  • height:100% only works when parents also have a specific height, doesn't always work with calculated heights;
  • when using left&right or top&bottom on position:absolute elements, some browsers can't calculate width & height
  • overflow-y or overflow-x have some usage limitations.
Silviu-Marian
  • 10,565
  • 6
  • 50
  • 72
  • The entire point of my structure is to have a calculated height for the red div. So this doesn't work. – Denys Séguret Feb 14 '13 at 15:54
  • Table cells can not be positioned, not even relative. So the absolute div won't position itself relative to the table cell. – Simon Feb 14 '13 at 15:55
  • @Simon see http://stackoverflow.com/questions/4564638/using-position-relative-absolute-within-a-td and try it out. – Silviu-Marian Feb 14 '13 at 21:08
  • Well that's just what I said: _the effect of position: relative on table elements is undefined_, which results, in almost every browser, in "not applicable". The code shown on your link just confirms my statement. – Simon Feb 15 '13 at 10:18
  • @Simon no, I explained the implications. What he's trying to achieve cannot be achieved with W3-compliant CSS. The best I can do is provide a working solution to the problem. My solution works on most browsers: http://jsfiddle.net/en98u/ – Silviu-Marian Feb 15 '13 at 20:26