CODEWITHSUNDEEP
csscss-position
KutaBeach
KutaBeach

Reputation: 1495

CSS: absolute positioned dialog and 100% heighted div

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?

Upvotes: 0

Views: 1437

Answers (2)

Ali Bassam
Ali Bassam

Reputation: 9959

<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.

Upvotes: 0

Ria Weyprecht
Ria Weyprecht

Reputation: 1275

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

Upvotes: 1

Related Questions