0

ページ内にスタイルを持つ div があります:

top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;

div はページ全体に引き伸ばされ、完全にカバーされます。

ページでダイアログボックスを開くと、状況が変わります。ダイアログボックスも絶対配置されますが、その高さはページの最初の高さよりも大きくなる可能性があります。これにより、スクロールバーが表示されます。しかし、引き伸ばされた div はもう引き伸ばされていません! その高さは同じままです。

つまり、新しい大きなブロックの出現による JavaScript でのページのスクロール可能領域の増加は、top:0 と bottom:0 を持つ要素の高さの増加を引き起こしていません。

どうすれば修正できますか？

4

2 に答える 2

1

div は常にposition:relativeorで最も近い祖先の高さを使用しposition:absoluteます。他に何も設定していない場合、これはおそらく html-Element です。そして、これは通常、コンテンツのサイズが変更されるという理由だけでサイズが変更されることはありません (下にスクロールして、firebug で html 要素を強調表示するとわかります)。ボディをに設定してみることができますposition:relative

于 2013-01-24T10:08:39.607 に答える
0 
<body style=" background-color:red; opacity:0.7;">
<div id="new" style="background-color:yellow; z-index:100; width:200px; height:100px;">
</div>
</body>

ここの body は絶対 div として機能します。これは、次の JavaScript コードを使用してテストできます。

<script type="text/javascript">
var num=100;
setInterval(function(){

document.getElementById("new").style.height= num+"px";
num=num+500;
},500);
</script>

div の高さが増加すると、本体も拡大し続けることに注意してください。

于 2013-01-24T10:27:56.580 に答える