從div內部繼承高度div

我有一個與下面的內容div。從div內部繼承高度div

<div class="outsideDiv"> 
    <div> 
    <p>Some text</p> 
    </div> 

    <div class="imgContainer"> 
    <img /> 
    </div> 
</div>

的imgContainer是右包含在p

的outsideDiv不具有預先限定的高度的div。它調整到p元素的高度。因此，如果p元素的高度爲500px，那麼外部div的高度將爲500px。我的網站是響應式的，因此p的高度（以及outsideDiv的高度）不是固定的，它根據屏幕而變化。這部分工作完美。

我希望imgContainer的高度與outsideDiv的高度相等。我已經嘗試過絕對和相對的位置，它的工作原理，但我不想用這種方式。此外，我嘗試繼承高度，但沒有運氣。

來源

2016-11-02 user4292106

你想通過只使用CSS來完成？ –

假設p = 500px而outsideDiv = 500px，現在你希望'imgContainer'等於outsideDiv，即500px，但現在'outsideDiv'將會是1000px，那麼？ –

我的方向是從左到右。這意味着圖像是正確的p – user4292106

.imgContainer { 
 
    background: rgba(0,0,0,.5); 
 
    position: absolute; 
 
    width:100%; 
 
    height:100%; 
 
    bottom: -100%; 
 
} 
 
.outsideDiv { 
 
    position: relative; 
 
}

<div class="outsideDiv"> 
 
    <div> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p><p>Some text</p><p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    
 
    </div> 
 

 
    <div class="imgContainer"> 
 
    <img /> 
 
    </div> 
 
</div>

來源

2016-11-02 06:25:23 GvM

你可以做到這一點使用Flexbox的。

body{ 
 
    margin:0; 
 
} 
 
.outsideDiv{ 
 
    background:red; 
 
    display:flex; 
 
} 
 
.outsideDiv > div{ 
 
    float:left; 
 
    width:50%; 
 
} 
 
.outsideDiv p{ 
 
    height:500px; 
 
} 
 
.imgContainer{ 
 
    background:blue; 
 
    float:right; 
 
    width:50%; 
 
    height:100%: 
 
}

<div class="outsideDiv"> 
 
    <div> 
 
    <p>Some text</p> 
 
    </div> 
 

 
    <div class="imgContainer"> 
 
    <img /> 
 
    </div> 
 
</div>

這裏是演示：https://jsfiddle.net/r73kh3bo/

來源

2016-11-02 06:35:26

如果你不想使用，因爲瀏覽器支持Flexbox的，這裏是另一個例子：https://jsfiddle.net/r73kh3bo/1/

基本上就可以只需創建一個與display: table和每個孩子與display: table-cell的父div將有相同的高度。

來源

2016-11-02 07:58:42

從div內部繼承高度div

回答

相關問題