垂直扩展div容器以适合另一个容器

Question

我在其他问题上尝试了很多例子，但似乎没有一个对我有用。我只是想创建一个带有100px宽边条的div容器，如果它动态增长，它将与容器一起垂直扩展。见下文;即使我将高度设置为100％

，内部div也不会增长

我的CSS看起来像这样;

  <style>
    #outer {
        border:10px solid #7A838B;
        margin:10px;
        border-radius:30px;
        max-width:500px;
        min-height:200px;
    }

    #leftblock {
        background-color:#7A838B;
        width:100px;
        height:auto;
        border-top-left-radius:20px;
        border-bottom-left-radius:20px;
        margin-left:-10px;
        margin-top:-10px;
    }
    #inner {
        color:white;
        height:100%;
    }
  </style>

我的HTML就是这样;

 <div id="outer">
        <div id="leftblock">
            <div id="inner">
                Test
            </div>
        </div>
    </div>

Answer 1

就像@mmeverdies说的那样，

  

为了设置高度：100％，父级也必须建立一个定义的高度，但如果高度属性值是“继承”，则祖父母必须设置它。等等。

你基本上有两个选择：

1）定义父元素的确切高度。然后，孩子的100％身高将会起作用。

2）使用position: absolute延伸子元素，如下所示：http://jsfiddle.net/r02nbmd9/ - 请注意父级的position: relative和孩子的position: absolute。

<div class="parent"><div class="child"></div></div>

<style>
.parent { 
    position: relative; 
    width: 300px; min-height: 200px; 
    background: yellow; 
}
.child { 
    position: absolute; top: 0; bottom: 0;
    width: 100px;
    background: red;  
} 
</style>

Answer 2

为了设置高度：100％，父级也必须建立一个定义的高度，但如果高度属性值是“继承”，则祖父母必须设置它。等等。

要了解它，请看一下这个css。

示例：完整的浏览器高度。

html, body {
  height: 100%;
}
#outer {
  height: 100%;
}
#leftblock {
  height: 100%;
}
#inner {     
    height:100%;
}

默认情况下，HTML高度为0.因此，您必须将height属性设置为“继承”＆＃39;至少有一位父母。