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■找固定高度。