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上的50px样式，如下所示：

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

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

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

怎么做？

任何帮助将不胜感激。

Answer 1

您可以使用jQuery实现此目的

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

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



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

同样对于宽度......

如何将相对定位div的底部减少到100％？

1 个答案: