how to reduce bottom of relatively positioned div to 100%? - html

Question

If I have two divs, outer and inner, with following stylesheet:
#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;
}
At the same time, outer and inner div should grow both in width and height if content inside innerdiv grows dynamically.
+---------------------+
| +=================+ |
| | | |
| | | |
| | | |
| | | |
| | div id="inner" | | div id="outer"
| | | |
| | | |
| | | |
| +-----------------+ |
+---------------------+
But if I change the stylesheet to this:
#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;
}
The inner div will go down to 50px from top and bottom of outer div as there is top:50px style on inner div like this:
+---------------------+
| |
| +=================+ |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
+-| |-+
| |
+-----------------+
But I want inner div will go down 50px from outer div, but remain bottom of outer div with position: relative like this:
+---------------------+
| |
| +=================+ |
| | | |
| | | |
| | | |
| | | |
| | | |
| +-----------------+ |
+---------------------+
How to do this?

Answer 1

You can achieve this using a jQuery
var newinnerdivheight=$("#innerdiv").height() + $("#innerdiv").innerHeight() +$("#innerdiv").outerHeight();
$("#innerdiv").height(newinnerdivheight);
$("#outerdiv").height(newinnerdivheight+50);
similarly for width also...