How to make div scale vertically all the way down?
css, html
Solution
If you need support from IE6 and up, the answer is: You can´t in css only.
There are different solutions to really scale the div or just have it appear like that:
- You can use a background-image for the grey div (if all you need is the background to stretch all the way down)
- You can use javascript to calculate the height of the grey div and apply it to the blue div
There is a ccs option using a very big padding and an equally big negative margin, but I don´t remember if it works for all browsers and I can't find the article right now.
Edit: The big padding / negative margin css solution:
The article is talking about Firefox 1.5 and Safari 2 so I don't know if it still works, but here it is.
Problem
I have the following situation, presented in the picture. Grey div is the parent of magenta and blue divs. Magenta div scales vertically with the content. I would like to have blue div always scale to the bottom of the containing grey, div. I've searched and tried various combinations, but all to nil effect. edit: Problem solved! Container needs an overflow: hidden, and the div that I want to stretch to the bottom (blue) needs padding-bottom: 1000px; margin-bottom: -1000; (or larger if you need)