Html 垂直扩展div容器以装入另一个容器

我在其他问题上试过很多例子，但没有一个对我有效。我只是尝试创建一个边栏为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>

#外{
边框：10px实心#7A838B；
利润率：10px；
边界半径：30px；
最大宽度：500px；
最小高度：200px；
}
#左块{
背景色：#7A838B；
宽度：100px；
高度：自动；
边框左上半径：20px；
边框左下半径：20px；
左边距：-10px；
利润上限：-10px；
}
#内在的{
颜色：白色；
身高：100%；
}

我的HTML就是这样

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

试验

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

要理解它，请查看此css

示例：用于全浏览器高度

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

---

默认情况下，HTML高度为0。因此，必须将height属性设置为至少一个父级的“继承”之外的值。

正如@mmeverdies所说

---

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

这里基本上有两种选择：

1） 定义父元素的确切高度。那么100%的孩子身高就可以了

2） 用

position:absolute

拉伸子元素，如下：-注意父元素的

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>

.parent{
位置：相对位置；
宽度：300px；最小高度：200px；
背景：黄色；
}
.儿童{
位置：绝对；顶部：0；底部：0；
宽度：100px；
背景：红色；
} 

孩子的身高是100%。100%的高度，准确地说？父母没有身高，祖父母只设置了最小身高。（这与设置高度不同）如果你能更具体地描述一下你想要的内部div的高度，那么我可能会帮你更多的忙。但现在，您实际上是将高度设置为0的100%。谢谢您的回复。正如我在描述中所说，我正在尝试将左侧块设置为相同的高度，即触摸祖父母容器的顶部和底部。我不希望祖父母容器小于200px，所以我设置了最小高度。父（leftblock）容器设置为根据内部块的拉伸方向自动展开高度。即使我将所有三个设置为100%，内部块仍保持文本的高度。