问题
I have a div inside my page with the styles :
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
The div is stretched over the page and covers it completely.
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.
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.
How can I fix it?
回答1:
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
回答2:
<body style=" background-color:red; opacity:0.7;">
<div id="new" style="background-color:yellow; z-index:100; width:200px; height:100px;">
</div>
</body>
The body here will act as your absolute div, you can test this by using this javascript code:
<script type="text/javascript">
var num=100;
setInterval(function(){
document.getElementById("new").style.height= num+"px";
num=num+500;
},500);
</script>
Notice that the body will keep expanding as well when the height of the div increases.
来源：https://stackoverflow.com/questions/14498518/css-absolute-positioned-dialog-and-100-heighted-div