Div Height 100% not working

Question

When i press 'Click me' the pop up div infobox appears. The bg div, which is behind the infobox div should cover 100% of the page, what is happening is it is only covering 100% of the window. How do i solve this? Here is the jsfiddle http://jsfiddle.net/mdanz/wWLVr/2/

   <html>
<head>
<style type="text/css">
#infobox {
position:absolute; width:100px; height:150px; top:100px; left:50%; z-index:2; margin-left:-50px; display:none; border:1px solid black; background-color:#FFFFFF;
}
#bg {
position:absolute; background-color:#000000; opacity:0.4;  filter:alpha(opacity=40); top:0; left:0; width:100%; display:none; min-height:100%; z-index:1;
}

.displaybox {
display:block; border:1px solid black; background-color:green; width:200px; height:200px;
}
#infobutton {
border:1px solid black; width:100px; padding:5px; display:block; cursor:pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#infobutton').click(function() {

    $('#bg').show();
    $('#infobox').show();
    $('html, body').animate({ scrollTop: 0 }, 0);
    });
    });
</script>
</head>
<body>
<div id='infobutton'>Click Me</div>
<div id='bg'></div>
<div id='infobox'></div>
<div class='displaybox'></div>
<div class='displaybox'></div>
<div class='displaybox'></div>
<div class='displaybox'></div>
<div class='displaybox'></div>
<div class='displaybox'></div>
   </body>

</html>

Answer 1

You can add :

$('#bg').css("height", $("body").css("height"));

just before showing this element...

You can have a look at this fiddle : http://jsfiddle.net/scaillerie/uWeJf/

Div Height 100% not working

Question

1 answers

solution1
1 ACCPTED 2012-01-05 13:51:46

Div Height 100% not working

Question

1 answers

solution1 1 ACCPTED 2012-01-05 13:51:46

solution1
1 ACCPTED 2012-01-05 13:51:46