CSS：绝对定位对话框和100％高度div [英] CSS: absolute positioned dialog and 100% heighted div
问题描述
我在页面中有一个div，其样式如下：
I have a div inside my page with the styles :
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
div扩展到页面并完全覆盖。
The div is stretched over the page and covers it completely.
当我在我的页面上打开一个对话框时，情况改变。对话框也是绝对定位的，但它的高度可以大于页面的初始高度。这将导致滚动条出现。但是伸展的div不再伸展了！它的高度保持不变。
The situation changes when I open some dialog box on my page. Dialogbox is also absolutely positioned but it's height can be bigger than the initial height of the page. This causes the scrollbars to appear. But the stretched div is not stretching any more! Its height remains the same.
换句话说，由于出现新的大块，使用javascript的页面的可滚动区域的增加不会导致
In other words, the increase of the scrollable area of the page with javascript due to appearance of new big block is not causing the increase of the height of the element with top:0 and bottom:0.
如何解决这个问题？
推荐答案
div总是使用最接近的祖先的高度 position：relative 或 position：absolute 。这很可能是html-Element，如果你没有设置anythign else。而这一般的不调整只是因为它的内容调整大小（你可以看到，如果你向下滚动并突出显示html元素与firebug）。您可以尝试将身体设置为 position：relative
the div always uses the height of the closest ancestor with position:relative or position:absolute. this is most likely the html-Element if you haven't set anythign else. And this one usualy doesn't resize just because it's content resizes (you can see that if you scroll down and highlight the html-element with firebug). you can try setting body to position:relative
这篇关于CSS：绝对定位对话框和100％高度div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
