html - 垂直扩展一个 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 所说，

In order to set height:100%, the parent must establish a defined height too but if height property value is 'inherit', then the grandparent must set it. and so on.

这里基本上有两种选择:

1) 定义父元素的准确高度。那么 child 的 100% 高度就可以了。

2) 像这样用 position: absolute 拉伸(stretch)子元素: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>