javascript - 从具有绝对位置的父级继承div高度

Question

我想用纯CSS实现这种布局:

背景中的渐变是浏览器窗口宽度的 100%。内部文本位于 1000 像素的 div 内，在浏览器窗口内居中。现在我希望文本定义渐变的高度。问题在于:渐变是绝对定位的(left: 0px; width: 100%)，但文本位于另一个 div 中。

我已经用 display:table; 和 display:table-cell; 尝试了一些东西，但是一旦我把 gradient div 放到 position:absolute 它不继承文本 div 的高度。

有人知道如何在没有 javascript 的情况下在纯 CSS 中实现这一点吗？

编辑:

对不起，我忘了说梯度不是问题(我使用的是 css3)。而且我还忘记添加代码:http://jsfiddle.net/kxu8N/1/

Answer 1

绝对定位元素不是布局流的一部分，因此它们不能从父元素继承维度信息。

您应该在包装文本的元素上使用 CSS 背景图像(或 CSS3 渐变)来为您提供渐变，而不是使用单独的元素。