Textarea填充垂直空间

Question

This fiddle说明我期待的布局。这是给我找麻烦的部分是CSS

#A_2_1_1, #A_2_1_2 { 
    float: left; 
    width: 100%; 
    height: 100px; 
} 

#A_2_1_3 { 
    background: yellow; 
    width: 100%; 
    height: 100%; 
} 

#A_2_1_3_1 { 
    width: 100%; 
    height: 100%; 
    box-sizing: border-box; 
} 

当#A_2_1_3_1是div，因为它是在小提琴，一切都很好：#A_2_1_3填充的#A_2_1剩余的垂直空间，但不会溢出了。但是，当#A_2_1_3_1更改为textarea时，情况不再如此：存在溢出（请参阅fiddle with textarea）。

如何防止发生这种溢出？我希望这个textarea填充剩余的垂直空间。

Answer 1

在这种情况下，由于前两位div有float值，所以在显示第三个div时忽略它们，因为它没有float。因此第三个div从顶部开始。但textarea不是像div这样的容器元素，因此它开始于两个div s结束，并且因为它具有height: 100%，它具有与第三个div相同的高度，并且包含div（第三个div）必须展开为容纳textarea。

使用top和bottom css属性。
小提琴：http://jsfiddle.net/3Cwdr/

<div id="A"> 
    <div id="A_1">This is the header content.</div> 
    <div id="A_2"> 
     <div id="A_2_1"> 
      <div id="A_2_1_1" style="background-color: yellow;">This is other stuff.</div> 
      <div id="A_2_1_2" style="background-color: yellow;">This is more stuff.</div> 
      <div id="A_2_1_3" style="height: auto; bottom: 0; position: absolute; top: 200px;"> 
       <textarea id="A_2_1_3_1" style="background-color: yellow;">Hi</textarea> 
      </div> 
     </div> 
    </div> 
</div> 

将该溶液认为A_2_1_1和A_2_1_2div■找固定高度。