内部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不会扩展到父母的身高

回答

相关问题