從父級繼承具有絕對位置的div高度

Question

我想用純CSS實現這種布局：

背景中的漸變是瀏覽器窗口寬度的100％。 內部文本位於瀏覽器窗口內居中的1000px div內。 現在，我希望文本定義漸變的高度。 這是問題所在：漸變的位置是絕對的（ left: 0px; width: 100% ），但是文本在另一個div內。

我已經嘗試過用display:table; 並display:table-cell; 但是一旦我將漸變div放置到position:absolute它就不會繼承文本div的高度。

任何人都可以在沒有JavaScript的純CSS中實現此目標的解決方案嗎？

編輯：

對不起，我忘了提到漸變不是問題 （我使用的是CSS3）。 而且我還忘記添加代碼： http : //jsfiddle.net/kxu8N/1/

Answer 1

絕對定位的元素不是布局流程的一部分，因此它們不能從父元素繼承尺寸信息。

您應該在包裹文本的元素上使用CSS背景圖片（或CSS3漸變），而不是使用單獨的元素來為您提供漸變。

Answer 2

您可以使用css3 background-size屬性來縮放漸變的高度。 將以div為背景的div上的高度設置為auto。

Answer 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的漸變說明。

Answer 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>

Answer 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;
}

Answer 6

因為找不到任何解決方案，所以將其破解。 因為我的內容是通過javascript動態添加的，所以我將內容添加了兩次。 第一次在覆蓋div內可見（在藍色背景上），第二次在藍色背景內可見。 具有visibility: hidden我將所有div隱藏在藍色背景內。

並且由於兩個div擁有相同的內容，因此它們具有相同的高度。 不漂亮，但是可以用。

從父級繼承具有絕對位置的div高度

問題描述

6 個解決方案

解決方案1
0 2012-09-20 14:56:35

解決方案2
0 2012-09-20 15:01:21

解決方案3
0 2012-09-20 15:01:45

解決方案4
0 2012-09-20 15:17:40

解決方案5
0 2012-09-20 15:24:58

解決方案6
0 已采納 2012-09-26 09:59:45

從父級繼承具有絕對位置的div高度

問題描述

6 個解決方案

解決方案1 0 2012-09-20 14:56:35

解決方案2 0 2012-09-20 15:01:21

解決方案3 0 2012-09-20 15:01:45

解決方案4 0 2012-09-20 15:17:40

解決方案5 0 2012-09-20 15:24:58

解決方案6 0 已采納 2012-09-26 09:59:45

解決方案1
0 2012-09-20 14:56:35

解決方案2
0 2012-09-20 15:01:21

解決方案3
0 2012-09-20 15:01:45

解決方案4
0 2012-09-20 15:17:40

解決方案5
0 2012-09-20 15:24:58

解決方案6
0 已采納 2012-09-26 09:59:45