Javascript 从具有绝对位置的父对象继承div高度_Javascript_Css_Html

Javascript 从具有绝对位置的父对象继承div高度

javascript css html

Javascript 从具有绝对位置的父对象继承div高度,javascript,css,html,Javascript,Css,Html,我想用纯CSS实现这种布局：背景中的渐变为浏览器窗口宽度的100%。内部文本位于1000px div内，在浏览器窗口内居中。现在我想让文本定义渐变的高度。问题是：渐变是绝对定位的（left:0px；width:100%），但文本位于另一个div中我尝试了一些使用display:table和显示：表格单元格但一旦我将gradient div放置到位置：absolute它就不会继承文本div的高度有人知道如何在没有javascript的纯CSS中实现这一点吗编辑：很抱歉，我忘了提到梯度不

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

背景中的渐变为浏览器窗口宽度的100%。内部文本位于1000px div内，在浏览器窗口内居中。现在我想让文本定义渐变的高度。问题是：渐变是绝对定位的（

left:0px；width:100%

），但文本位于另一个div中

我尝试了一些使用

display:table和显示：表格单元格
但一旦我将gradient div放置到位置：absolute
它就不会继承文本div的高度
有人知道如何在没有javascript的纯CSS中实现这一点吗
编辑：
很抱歉，我忘了提到梯度不是问题所在（我正在使用css3）。此外，我还忘了添加代码：
绝对定位元素不是布局流的一部分，因此它们无法从父元素继承维度信息
您应该在包装文本的元素上使用CSS背景图像（或CSS3渐变）来提供渐变，而不是使用单独的元素。
您可以使用CSS3背景大小属性来缩放渐变的高度。在以渐变为背景的div上，将“高度”设置为“自动”。
以下是一个不知道HTML结构的答案：
注意，我只包括webkit的渐变说明
 
<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>

p、 跨度{
左边距：20px；
}
#标志{
字体大小：粗体；
高度：100px；
}
#口号{
宽度：100%；
高度：150像素；
背景：webkit线性梯度（左，rgba（0119255,0）0%，rgba（0200230,15）25%，rgba（0200230,15）50%，rgba（0200230,15）75%，rgba（0119255,0）100%）
标志
一些文本定义了这个层次
在我的例子中，我将蓝色移到渐变中。这样，一旦你添加了更多的行，文本行就会自动增加
<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>

因为我没有找到任何解决方案，所以我破解了它。因为我的内容是通过javascript动态添加的，所以我添加了两次内容。第一次在叠加div内可见（在蓝色背景上），第二次在蓝色背景内可见。使用visibility:hidden
I隐藏蓝色背景中的所有div
因为两个div的内容相同，所以它们的高度相同。虽然不漂亮，但它可以工作。
您的HTML和CSS会有所帮助。：）我猜绝对定位在一个相对的容器中，但是没有代码，很难看到需要做什么。你试过使用css3渐变吗？我做了一些编辑，希望对你有所帮助。。。所以与其摆弄绝对定位，为什么不把#blue
放在#blue background
？thx的内部，但正如您在这里看到的，内容会对齐到窗口的左侧。但我想将其保留在#outerdiv中（文本应包装在200px outer div中，并与outer div的左侧对齐）
<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>

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