13

Let's say I have 2 Divs.

  • The first one has a height of 100px.
  • The last one should go from the end of the first one up to the end of the site.

I tried all what I know: When I set it to 100% it takes up the complete site, so 100px too much. When I try it without setting a height, I get only as much as I write into.

kapa
  • 77,694
  • 21
  • 158
  • 175
PassionateDeveloper
  • 14,558
  • 34
  • 107
  • 176

3 Answers3

2

I would probably use some Javascript to solve this problem. It is probably the only good way you are going to solve this, considering the many inconsistencies that occur between IE and the rest of the browser community. Use a framework like JQuery to automatically set the height of the second div, that way you can be sure that the same effect will be consistent across all browsers as JQuery is cross browser compliant.

Simon H
  • 1,735
  • 12
  • 14
2

Make use of position: absolute, there is a trick when you specify top and bottom at the same time, basically stretching your div:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body { height: 100%; margin: 0; }
            #felso { height: 100px; }
            #also { position: absolute; top: 102px; bottom: 0; left: 0; right: 0; }
        </style>
    </head>
    <body>
        <div id="felso"></div>
        <div id="also"></div>
    </body>
</html>

Tweak it according to your specific needs. I wrote 102px for top because of the borders, which add 1px * 2 to the height of #felso.

jsFiddle Demo

kapa
  • 77,694
  • 21
  • 158
  • 175
  • #also doesn't take up the rest of the viewport. div 2 should be 100% high minus the height of div 1. – Bazzz Nov 22 '10 at 14:48
  • It actually stretches to the size of the viewport because of giving the top and bottom at the same time. Which browser did you try? For me it works in IE8, FF, Chrome. – kapa Nov 23 '10 at 10:49
  • 1
    Agree, it does. My problem was with the doctype which I didn't copy and forced the browser in quirks mode (IE8). Anyway, your solution seems the most elegant (better than table at least). Funny point is that FF in quirks mode does it correctly, if only I tried that. :) – Bazzz Nov 24 '10 at 07:13
  • You can do the same thing with a position:fixed, and give the parent a top padding equal to the height of the header bar, if you'd like the same effect but to have it linger, too. – NerdyDeeds Aug 09 '22 at 19:19
0

I don't think this is possible in pure CSS because you cannot do 100% - 100px. You can use a table with height 100% and two rows. Then the first row is 100px and the second one takes the rest of the height.

<table style="height:100%;">
<tr>
<td style="height:100px;">instead of div 1, is 100px</td>
</tr>
<tr>
<td>instead of div 2, takes the rest of the height</td>
</tr>
</table>
Bazzz
  • 26,427
  • 12
  • 52
  • 69
  • 1
    I hate tables... tables are soooo old! I know it works with tables, but my complete design (and its not a easy one) is based on divs... – PassionateDeveloper Nov 22 '10 at 10:26
  • Haha I agree that tables are not ideal, but from a maintainability point of view: when you can choose between a simple table or a complex nested div with odd css and javascript (it just doesn't work out of the box), what would you choose? Everybody understands a simple archaic table. :) – Bazzz Nov 22 '10 at 10:30
  • With negative margins it might be possible. – Badr Hari Nov 22 '10 at 11:32
  • @Badr Hari, can you post some example code, please? I look forward to seeing your solution with negative margins. – Bazzz Nov 22 '10 at 12:14
  • What's wrong with absolute positioning? – kapa Nov 22 '10 at 13:21
  • @bazmegakapa Why do you mention absolute positioning? It's not mentioned before and nobody said that something is wrong with it. But to answer your question: it doesn't take up the rest of the viewport height, as you cannot before know the viewport's height and therefore cannot position div 2 absolutely so it takes the viewport's height -100px. – Bazzz Nov 22 '10 at 14:44
  • @bazmegakapa: True, your answer is the most elegant. I opt out my table. :) – Bazzz Nov 25 '10 at 09:22
  • Hey, tables get a bad rap. They've got 2 things going for em: They really ARE good for (wait for it): Tabular data. not to say they'll compete with an active JS-driven table or even flexgrid, but if you just have a 3x5 stack of data to present... well, they were kinda DESIGNED for that. The other is that, come what may, they've been around SO long that every browser on every device not only supports 'em, but does so very nearly exactly the same way. Which is more than can be said for a LOT of the more modern approaches. I'm not advocating their use in layout, just defending a maligned relic. – NerdyDeeds Aug 09 '22 at 19:24