ansaurus

Question

Answer 1

+1 A:

Umm... what you're asking can get into complicated territory, but I'd start with eliminating inconsistencies in your code. For example:

Your table is 100% height.
Inside, you have a 200px high <td> inside one <tr>
Inside, you also have a 100% high second <tr>

So you're telling the code that 100% + 200px = 100%. That fails logically, although you might want to hack your code that way sometimes.

First, try adjusting the properties so that they work logically and try to reduce your code to greater simplicity, and then work your way up from there. After that, if a scrollbar still appears, you'll probably need to start tweaking with negative margins. This will get so "intimate" with your code that frankly anyone advising you would need a clear sense of your objectives, rather than advising on individual code elements.

Tom 2010-01-27 12:13:28

As far as I know the height percentage that an element must take up in its _parent_ container. So, my thought was for the table to be 100% height (of the body), the first one of the rows to be height:200px (of the table) and the second one take up the remaining height (of the table). If the "equation" is not correct, how am I going to achieve the second row to be as I expect?

Markos Fragkakis 2010-01-27 12:18:59

I see....... on rough visual estimation, when the scrollbars appear, would you say that the "space" that appears at the bottom of the page (i.e. the scrollable area) is 200px?

Tom 2010-01-27 12:22:03

Yes, it is about (if not exactly) 200px.

Markos Fragkakis 2010-01-27 12:23:59

Ok, so this is what I meant by negative margins. This is going to get potentially frustrating, or maybe not. Try adding {margin-bottom: -200px} for the table. If that doesn't work, try giving the same property to your <body>..... it's going to get silly like this. Here's one link I've learnt a lot from: http://ryanfait.com/sticky-footer/ .... it uses just these techniques. Good luck.

Tom 2010-01-27 12:28:30

The margin-bottom: -200px indeed does work for IE. But it makes the scrollbar appear in FF. I will experiment some more today and tomorrow. If i find anything I will post. Thanks Tom!

Markos Fragkakis 2010-01-27 14:59:40

Markos.... glad it was of help. Remember to keep those negative margins in mind when you develop the page further, as sometimes additional margins and paddings elsewhere can mess it up and you'll need to tweak further.

Tom 2010-01-27 16:15:53

Answer 2

+1 A:

If the problem is the scrollbar, you can use the CSS "overflow" attribute in order to force the behavior:

visible: the overflow is not clipped. It renders outside the element's box. This is default;
hidden: the overflow is clipped, and the rest of the content will be invisible;
scroll: the overflow is clipped, but a scroll-bar is added to see the rest of the content;
auto: if overflow is clipped, a scroll-bar should be added to see the rest of the content.

Davmuz 2010-01-27 15:13:10

ansaurus

tags:

views:

answers:

height:100% problem in IE7, not in FF

related questions