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.

Improve this question
0

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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

Improve this answer

4 Comments

#also doesn't take up the rest of the viewport. div 2 should be 100% high minus the height of div 1.
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.
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. :)
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.
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>
Improve this answer

8 Comments

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...
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. :)
With negative margins it might be possible.
@Badr Hari, can you post some example code, please? I look forward to seeing your solution with negative margins.
What's wrong with absolute positioning?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.