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

0
votes

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?

1
htmlcsscss-position

1 Answers

0
votes

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...