2012-01-05 86 views
0

当我按'点击我'弹出div infobox出现。 bg div,它位于infobox div的后面,应该覆盖100%的页面,发生的情况是它只覆盖了窗口的100%。我如何解决这个问题?这里是的jsfiddle http://jsfiddle.net/mdanz/wWLVr/2/Div高度100%不能正常工作

<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> 
+0

你需要最小宽度:100%,宽度:100%。 此外,HTML,身体需要有最小宽度:100%和宽度:100% – Jung3o 2012-01-05 13:49:01

+0

宽度:100%部分是为IE支持。 – Jung3o 2012-01-05 13:49:39

回答