View Full Version : div with height 100% and overflow: scroll, Firefox problem

Mar 28th, 2007, 03:37 PM
Guess it's my turn to ask a question, hi everyone!

I've been spending the past few days trying to make the design of the website I'm working on decent in 800x600 screen resolution. That mean adjusting heights everywhere, for the most part of the work, and everything finally worked like intended after lots of research (cuz im working in asp.net... with ajax. anyways thats not relevant here)

The one last problem I still have is with dynamically dimensionned tablecells containing divs that adjust to the cell width and height accordingly. I display data from a database in those divs and I want a scrollbar to appear on the right if the data (search results) is bigger than the div and cell can contain. It works about right in IE6, I can't test with IE7 currently, and in Firefox well, the behavior is rather weird... It displays the scrollbar shade, but instead of adding the scroller when the data becomes too long, it just stretches the div down and its not very pretty.

Here's a bit of the source code (I'll spare you the generated nightmare ^^) :

<table style="height: 85%">
<!-- the dynamic height and width are inserted here, cuz thats also the default disposition -->
<td style="height:45%;width:65%;">
<div id="divSearch" style="overflow:scroll;overflow-x:hidden; width:100%;height:100%;">
CONTENT TEXT you can expect this to go over the 45% of the 85% of the table in the page quite often

The the reason why I use overflow scroll and overflow-x hidden is cuz I want to display only the vertical scrollbar, and at some point if I left it on auto, whenever I had data to scroll I ended up with an horizontal scrollbar in IE (when it wasn't needed at all...).

Now as I mentionned earlier, works just fine in IE6 (one of the rare time it does, actually) and when there is no data the divs resize just fine, the minute there is too much stuff to be displayed it all messes up. Anyone has any idea? Maybe you're just not supposed to have scrollbars on %height but that would be kinda lame seeing as if you stretch the page further the scrollbar just has to not scroll anymore, it can stay there (I actually WANT IT to stay there!).

Thanks for your time :)

Mar 28th, 2007, 04:01 PM
In the CSS put HTML and Body to 100% height.

Mar 28th, 2007, 05:42 PM
Did that already, otherwise the rest wouldnt be working ^^ thanks for trying to help though

Oh and btw before I get all the usual suggestions: My doctype is set to XHTML 1.0 Transitional, I'm using MasterPages and content Pages and user controls, but everything has been reviewed. I went through the whole thing and put borders to make sure everything was fine. Even though I noticed a few height 100% moving over the parent container for no particular reason, with a bit of tweaking everything was set to work fine.

Except the scrollbars in firefox

Mar 28th, 2007, 06:00 PM
I think you are missing that when you specify a height for a table or a table cell, then this should really be thought of as a minimum height. This is in accordance with the specs (http://www.w3.org/TR/CSS21/tables.html#height-layout)

Firefox is rendering your page correctly. IE has problems with the automatic table layout sometimes 'forgetting' to expand/reflow cells when necessary.

As for your problem, it is not clear what you are trying to do. Your example is not useful. You have only one row in your table so height: 45% makes no sense for the table cell. Also height: 85% only makes sense if we know what is outside the table. twodayslate is right in that the body element doesn't automatically take the height of the viewport.

Would it not suffice to specify a height using a pixel measure for the div? You will maybe have to provide an actual link to the page.

Mar 28th, 2007, 06:31 PM
Alright, I can't provide a link to our dev server, so I took a few screenshots instead.

When there is no data, displays as intended (http://krokador.freepgs.com/images/nodata.jpg)
With data in IE, the scrollbar adjusts when the window is resized (http://krokador.freepgs.com/images/dataie.jpg)
With data, in firefox. It doesnt fit in the screen anymore (http://krokador.freepgs.com/images/dataff.jpg)
This is an example of why I need to change the % through code, taken in IE (http://krokador.freepgs.com/images/dataIEBlog.jpg)

Why I use % instead of pixel heights (what i had before) is because we need to have something decent to display in the 800x600 resolution because most of the apps will not be used by people with very up-to-date browsers and computers. The actual website has a left navigation bar as well as a small header at the top. If I had set the height in pixels so it would work in 800x600, it wouldve looked totally awful in 1024x768. If I set it for 1024x768, there's a lot of horizontal scrolling to do, as well as some vertical, when the data should really just be displayed in one page with the less scrolling possible. And its neat to have the fields follow the window resizing, too. So height and width% was the best way to go IMO.

I know firefox usually displays everything the way it should, and IE just messes everything up all the time (and this is why I'm testing everything in firefox). But in this one particular situation I would've thought both browser,s behavior wouldve been similar. I've had problems with firefox with cells and div contents overflowing their container and having part of the text disappear, so why in this one situation, it stretches the div is way beyond me. Or there is something, somewhere, that i didn't get (and the being tired factor doesn't help me right now.)

The code example I provided was just simplified because i thought it would be easier to understand than the source code (which contains pretty aspnet tags and stuff) or the generated source code (which contains element ids as long as this post, and who's alignement is rather lame, too).

Now, if I have to resort to using pixel dimensions according to the current screen resolution, I can find a way to do it. I just lose a bit of the interface adaptability I'm searching for, but as long as the scrollbars work and the page doesnt stretch to infinity, I can deal with.

Mar 28th, 2007, 07:19 PM
In your case I would not even use a tables for this. You would avoid having to deal with the problems related to table height algorithms.

As a side issue, besides the problematic table behavior with respect to rendering, it even seems that the table element isn't being used correctly here with respect to semantics.

Maybe try another approach: Instead of using a table, have you tried using a single div having height: 85% ? Then as a replacement for your three table cells use within this div three div elements (again having percentage height/width).

Mar 28th, 2007, 08:04 PM
Yeah well I've been raging with this code for too long now so I'm just going to overhaul the whole website's design to use divs instead of tables in most places. I wasn't the one who made this website at first and when i got it there were so many tables in it that I didn't know what was supposed to display where, and I've been too lazy to research to change to the CSS way but I think thats the only option I really have if I want the website to look as it should.

Thanks for the help though, you just confirmed what i thought about those stoopid tables :P I dunno why they show us to use that in school.

Mar 29th, 2007, 05:33 PM
well hey, just to follow it up, I redid the whole layout with divs (makes a lot of them, and with aspnet there are some things you gotta consider when you put that runat=server attribute in an html tag... But somehow it's clearer now :P) and now everything works. So thanks for pushing me in the right way: I'm never gonna use tables for major design ever again!