How to make div scale vertically all the way down?

 

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)

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.

    I got this to work (in Chrome anyway) by setting the parent's div: 

    position: absolute;

    and the child's div: 

    height: 100%;

    In my experience setting the height of the blue DIV to 100% doesn't work. The only time that I have wanted this was to have the blue DIV with it's own background, to solve this you need to just have the background of the gray DIV include the blue background of the other DIV.

    链接地址: http://www.djcxy.com/p/42796.html

    上一篇: 在OO的哪个阶段添加日志记录和跟踪？

    下一篇: 如何使div垂直一直下降？