从具有绝对位置的父级继承 div 高度答案

【问题标题】：Inherit div height from parent with absolute position从具有绝对位置的父级继承 div 高度
【发布时间】：2012-09-20 14:52:02
【问题描述】：

我想用纯CSS来实现这种布局：

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

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

任何人都可以解决如何在没有 javascript 的纯 CSS 中实现这一点？

编辑：

很抱歉，我忘了提及 渐变不是问题（我使用的是 css3）。而且我也忘了加代码：http://jsfiddle.net/kxu8N/1/

【问题讨论】：

您的 HTML 和 CSS 会有所帮助。 :)
我猜测相对容器内的绝对定位，但没有代码很难看出需要做什么。
你试过用css3渐变吗？
我做了一些修改，希望对您有所帮助
... 所以...与其摆弄绝对定位，不如把#blue 放在#blue-background 里面？

标签： javascript css html

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以使用 css3 background-size 属性来缩放渐变的高度。在以渐变为背景的 div 上将高度设置为 auto。

【讨论】：

【解决方案3】：

这是一个不知道您的 HTML 结构的答案：http://jsfiddle.net/8xagQ/1/

.gradient{
    background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,119,255,1) 25%,rgba(0,119,255,1) 50%,rgba(0,119,255,1) 75%,rgba(0,119,255,0) 100%);

    margin:10px 0;
    text-align:center;
    color:#fff;
    padding:10px 0;
}

请注意，我只包含了 webkit 的渐变说明。

【讨论】：

【解决方案4】：

<html>
 <head>
<style type="text/css">
p,span{
    margin-left:20px;
}

#logo{
    font-weight: bold;
    height:100px;
}
#slogan{
    width:100%;
    height:150px;
    background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,200,230,15) 25%,rgba(0,200,230,15) 50%,rgba(0,200,230,15) 75%,rgba(0,119,255,0) 100%);}
</style>
</head>
<body>
    <div id="logo">
        <p>Logo</p>
    </div>
    <div id="slogan">
        <span>some text that defines hieght of this</span>

    </div>
</body>
</html>

【讨论】：

【解决方案5】：

在我的情况下，我将你的蓝色移动到你的渐变中。这样，一旦您添加更多行，文本行就会自动创建

<div id="container">

    <div id="outer">
      <div id="blue-background">
         <div class="span3" id="blue">
          Here is my content<br>
             and this content should define the height of the underlying #blue-background <br />
             and if we are adding more and more and more
          </div>     
        </div>

    </div>

</div>

然后将文本插入其中，我在 CSS 中更改了一些设置

#blue {
  z-index: 1;
    position:relative;
    margin:auto;
    text-align:center;
}

【讨论】：

谢谢，但正如您在此处看到的 jsfiddle.net/r3NsD/1 内容将对齐到窗口的左侧。但我想将其保留在#outer div 中（文本应包裹在 200px 的外部 div 内并与外部 div 的左侧对齐）

【解决方案6】：

因为我没有找到任何解决方案，所以我破解了它。因为我的内容是通过 javascript 动态添加的，所以我添加了两次内容。第一次在覆盖的 div 内可见（在蓝色背景上），第二次在蓝色背景内可见。使用visibility: hidden，我将所有 div 隐藏在蓝色背景中。

因为两个 div 的内容相同，所以它们的高度相同。不漂亮，但很管用。

【讨论】：