如何減少相對定位div的底部至100％？

Question

如果我有兩個div，外部和內部，具有以下樣式：

#html,body{ 
    height:100%; 
    margin:0; 
    padding: 0; 
} 
#outer{ 
position: relative; 
top: 0; 
left: 0; 
height: 100%; 
width: 100%; 
background-color: red; 
} 
#inner{ 
position: relative; 
top: 0; 
left: 0; 
width: 0; 
height: 100%; 
background-color: yellow; 
} 

與此同時，外部和內部的div都應該在寬度和高度成長，如果裏面innerdiv內容動態增長。

+---------------------+ 
| +=================+ | 
| |     | | 
| |     | | 
| |     | | 
| |     | | 
| | div id="inner" | | div id="outer" 
| |     | | 
| |     | | 
| |     | | 
| +-----------------+ | 
+---------------------+ 

但如果我更改了樣式表這樣的：

#html,body{ 
    height:100%; 
    margin:0; 
    padding: 0; 
} 
#outer{ 
position: relative; 
top: 0; 
left: 0; 
height: 100%; 
width: 100%; 
background-color: red; 
} 
#inner{ 
position: relative; 
top: 50px; 
left: 0; 
width: 0; 
height: 100%; 
background-color: yellow; 
} 

因爲有頂部的內格將從頂部和外層div的底部下井50像素：50px的風格像這種內在的div ：

+---------------------+ 
|      | 
| +=================+ | 
| |     | | 
| |     | | 
| |     | | 
| |     | | 
| |     | | 
| |     | | 
+-|     |-+ 
    |     | 
    +-----------------+ 

但我想內格會下降，從外層div 50像素，但仍外層div的底部，位置：相對是這樣的：

+---------------------+ 
|      | 
| +=================+ | 
| |     | | 
| |     | | 
| |     | | 
| |     | | 
| |     | | 
| +-----------------+ | 
+---------------------+ 

如何做到這一點？

任何幫助將不勝感激。

Answer 1

你可以做到這一點使用jQuery的

var newinnerdivheight=$("#innerdiv").height() + $("#innerdiv").innerHeight() +$("#innerdiv").outerHeight(); 

$("#innerdiv").height(newinnerdivheight); 



    $("#outerdiv").height(newinnerdivheight+50); 

同樣的寬度也...