html - 如何将相对定位的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;
 }

同时，如果 innerdiv 内部的内容动态增长，则外部和内部 div 的宽度和高度都应该增长。

+---------------------+
| +=================+ |
| |                 | |
| |                 | |
| |                 | |
| |                 | |
| | 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 将从外部 div 的顶部和底部下降到 50px，因为内部 div 上有 top:50px 样式，如下所示：

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

但我希望内部 div 会从外部 div 下降 50px，但保持外部 div 的底部位置：relative 像这样：

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

这个怎么做？

Answer 1

您可以使用 jQuery 来实现这一点

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

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



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

同样对于宽度也...