內部div不會擴展到父母的身高

如果我的問題與其他人在StackOverflow上發佈的問題類似，我表示歉意。似乎沒有任何類似的問題能夠解決我的特殊情況。內部div不會擴展到父母的身高

我有一個父div內的兩個子div。 Child-div-2有一個固定的高度，它定義了父div的高度。

如何將Child-Div-1大小設置爲Child-div-2和父級div的高度？

這裏是一個的jsfiddle我創建證明的情況： https://jsfiddle.net/xandercrewz/hb7yvjw0/

我想可以自動調整大小的橙色容器，它的高度是一樣的綠色和紅色的容器。

謝謝。

<div class='outer-container-blue'> 
    <div class='inner-container-left-orange'> 
    inner left 
    </div> 

    <div class='inner-container-right-red'> 
    <div class='inner-container-right-green'> 

     <div class='inner-container-right-child'> 
     inner1 
     </div> 
     <div class='inner-container-right-child'> 
     inner2 
     </div> 
     <div class='inner-container-right-child'> 
     inner3 
     </div> 

    </div> 
    </div> 

</div>

CSS：

.outer-container-blue { 
    width: 800px; 
    height: auto; 
    background-color: blue; 
    } 
    .inner-container-left-orange { 
    display: inline-block; 
    float:left; 
    width: 15%; 
    background-color: orange; 

    /* I would like the orange container to be automatically sized so that */ 
    /* it's height is the same as the green and red containers. */ 
    height: auto; 
    } 
    .inner-container-right-red { 
    position: relative; 
    display: inline-block; 
    float:left; 
    width: calc(100% - 120px); 
    height: auto; 
    background-color: red; 
    } 
    .inner-container-right-green { 
    position: relative; 
    display: inline-block; 
    height: auto; 
    background-color: green; 
    left: 50%; 
    transform: translateX(-50%); 
    width: auto; 
    } 
    .inner-container-right-child { 
    display: inline-block; 
    width: 100px; 
    height: 25px; 
    margin: 10px; 
    background-color: yellow; 
    border: 5px solid black; 
    }

來源

2015-03-13 BitFunny

http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height – 2015-03-13 09:59:59

您可以設置在外容器上的高度（55像素爲我工作）。然後將內部容器的高度設置爲100％。

來源

2015-03-13 09:58:44 Broseph

好的！總是忘記這個:)似乎和父母職位親戚一樣工作，而且孩子的職位也很差。 – 2015-03-13 10:01:06

使用下面你.inner-container-left-orange CSS：

.inner-container-left-orange { 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
}

而且overflow: hidden;到

.outer-container-blue

您可以檢查Here。

來源

2015-03-13 10:13:15 ketan

內部div不會擴展到父母的身高

回答

相關問題