如何使div缩放垂直一直向下？ [英] How to make div scale vertically all the way down?

问题描述

我有以下情况，在图片中呈现。灰色div是洋红色和蓝色div的父级。洋红色div与内容垂直缩放。我想有蓝色div总是缩放到包含灰色的底部，div。

编辑：
问题解决！容器需要一个overflow：hidden，和div，我想拉伸到底部（蓝色）需要padding-bottom：1000px; margin-bottom：-1000; （或更大，如果你需要）

解决方案

如果你需要从IE6及以上的支持，答案是：

有不同的解决方案可以真正缩放div，或者只是像这样：

1. 您可以使用背景图像作为灰色div（如果您需要的是背景，可以向下伸展）


2. 您可以使用javascript计算




有一个ccs选项使用一个非常大的填充和同样大的负边距，但我不记得它是否适用于所有浏览器，我现在找不到文章。





编辑大填充/负边距css解决方案：





本文讨论的是Firefox 1.5和Safari 2，因此我不知道它是否仍然有效，但这里是。




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:

1. You can use a background-image for the grey div (if all you need is the background to stretch all the way down)
2. 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.

这篇关于如何使div缩放垂直一直向下？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！