0

次のスタイルシートを使用して、外側と内側の 2 つの 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 内のコンテンツが動的に拡大する場合、outer div と inner 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 に top:50px スタイルがあるため、内側の div は外側の div の上下から 50px まで下がります。

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

しかし、内側の div が外側の div から 50 ピクセル下がって、外側の div の下部に位置が残るようにしたい: 次のように相対:

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

これを行う方法？

4

1 に答える 1

0

jQueryを使用してこれを実現できます

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

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



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

同様に幅も...

于 2013-07-29T05:47:59.643 に答える