我正在创建图库网站，其中很少（atm 6图像）响应任何屏幕分辨率。而不是使用静态高度和百分比宽度我创建了一个脚本，决定每个图像的宽度，高度和位置（作为位置：绝对），但问题是，在某些情况下，父div（容器）的高度低于子。为什么会这样？
<body style="margin:0">
<div id="kontener" style="border:1px solid black; max-width: 1100px; padding: 80px; margin: 0 auto;">
<div id="mydiv" class="mydiv" style="width:100%; height:100%; position: relative;">
<div id="resize1" style="border: 1px solid black; position: absolute;">
lalala
</div>
<div id="resize2" style="border: 1px solid black; position: absolute;">
lalala
</div>
<div id="resize3" style="border: 1px solid black; position: absolute;">
lalala
</div>
<div id="resize4" style="border: 1px solid black; position: absolute;">
lalala
</div>
<div id="resize5" style="border: 1px solid black; position: absolute;">
lalala
</div>
<div id="resize6" style="border: 1px solid black; position: absolute;">
lalala
</div>
</div>
</div>
</body>
还有javascript来确定div的宽度，高度和位置：
<script type="text/javascript">
$('#informacja').text('Browser (Width : '
+ mydiv.clientWidth +',FULLWIDTH:'+$(window).outerWidth() + ' , Height :' + $(window).height() + ' )');
var w = mydiv.clientWidth;
var browser = $(window).outerWidth();
if (browser>1136) {
document.getElementById('resize1').style.width=(w-40)/3;
document.getElementById('resize1').style.height=2*(w-40)/9;
document.getElementById('resize1').style.left='0';
document.getElementById('resize1').style.top='0';
document.getElementById('resize2').style.width=(w-40)/3;
document.getElementById('resize2').style.height=2*(w-40)/9;
document.getElementById('resize2').style.left=(w-40)/3+20;
document.getElementById('resize2').style.top='0';
document.getElementById('resize3').style.width=(w-40)/3;
document.getElementById('resize3').style.height=2*(w-40)/9;
document.getElementById('resize3').style.left=2*(w-40)/3+40;
document.getElementById('resize3').style.top='0';
document.getElementById('resize4').style.width=(w-40)/3;
document.getElementById('resize4').style.height=2*(w-40)/9;
document.getElementById('resize4').style.left=0;
document.getElementById('resize4').style.top=2*(w-40)/9+20;
document.getElementById('resize5').style.width=(w-40)/3;
document.getElementById('resize5').style.height=2*(w-40)/9;
document.getElementById('resize5').style.left=(w-40)/3+20;
document.getElementById('resize5').style.top=2*(w-40)/9+20;
document.getElementById('resize6').style.width=(w-40)/3;
document.getElementById('resize6').style.height=2*(w-40)/9;
document.getElementById('resize6').style.left=2*(w-40)/3+40;
document.getElementById('resize6').style.top=2*(w-40)/9+20;
}
else if(browser>756) {
document.getElementById('resize1').style.width=(w-20)/2;
document.getElementById('resize1').style.height=(w-20)/3;
document.getElementById('resize1').style.left='0';
document.getElementById('resize1').style.top='0';
document.getElementById('resize2').style.width=(w-20)/2;
document.getElementById('resize2').style.height=(w-20)/3;
document.getElementById('resize2').style.left=(w-20)/2+20;
document.getElementById('resize2').style.top='0';
document.getElementById('resize3').style.width=(w-20)/2;
document.getElementById('resize3').style.height=(w-20)/3;
document.getElementById('resize3').style.left='0';
document.getElementById('resize3').style.top=(w-20)/3+20;
document.getElementById('resize4').style.width=(w-20)/2;
document.getElementById('resize4').style.height=(w-20)/3;
document.getElementById('resize4').style.left=(w-20)/2+20;
document.getElementById('resize4').style.top=(w-20)/3+20;
document.getElementById('resize5').style.width=(w-20)/2;
document.getElementById('resize5').style.height=(w-20)/3;
document.getElementById('resize5').style.left='0';
document.getElementById('resize5').style.top=2*(w-20)/3+40;
document.getElementById('resize6').style.width=(w-20)/2;
document.getElementById('resize6').style.height=(w-20)/3;
document.getElementById('resize6').style.left=(w-20)/2+20;
document.getElementById('resize6').style.top=2*(w-20)/3+40;
}
else {
document.getElementById('resize1').style.width=w;
document.getElementById('resize1').style.height=2*w/3;
document.getElementById('resize1').style.left='0';
document.getElementById('resize1').style.top='0';
document.getElementById('resize2').style.width=w;
document.getElementById('resize2').style.height=2*w/3;
document.getElementById('resize2').style.left='0';
document.getElementById('resize2').style.top=2*w/3+20;
document.getElementById('resize3').style.width=w;
document.getElementById('resize3').style.height=2*w/3;
document.getElementById('resize3').style.left='0';
document.getElementById('resize3').style.top=4*w/3+40;
document.getElementById('resize4').style.width=w;
document.getElementById('resize4').style.height=2*w/3;
document.getElementById('resize4').style.left='0';
document.getElementById('resize4').style.top=6*w/3+60;
document.getElementById('resize5').style.width=w;
document.getElementById('resize5').style.height=2*w/3;
document.getElementById('resize5').style.left='0';
document.getElementById('resize5').style.top=8*w/3+80;
document.getElementById('resize6').style.width=w;
document.getElementById('resize6').style.height=2*w/3;
document.getElementById('resize6').style.left='0';
document.getElementById('resize6').style.top=10*w/3+100;
}
$(window).resize(function () {
var w = mydiv.clientWidth;
var browser = $(window).outerWidth();
$('#informacja').text('Browser (Width : ' + mydiv.clientWidth
+',FULLWIDTH:'+$(window).outerWidth()
+ ' , Height :' + $(window).height() + ' )');
if (browser>1136) {
document.getElementById('resize1').style.width=(w-40)/3;
document.getElementById('resize1').style.height=2*(w-40)/9;
document.getElementById('resize1').style.left='0';
document.getElementById('resize1').style.top='0';
document.getElementById('resize2').style.width=(w-40)/3;
document.getElementById('resize2').style.height=2*(w-40)/9;
document.getElementById('resize2').style.left=(w-40)/3+20;
document.getElementById('resize2').style.top='0';
document.getElementById('resize3').style.width=(w-40)/3;
document.getElementById('resize3').style.height=2*(w-40)/9;
document.getElementById('resize3').style.left=2*(w-40)/3+40;
document.getElementById('resize3').style.top='0';
document.getElementById('resize4').style.width=(w-40)/3;
document.getElementById('resize4').style.height=2*(w-40)/9;
document.getElementById('resize4').style.left=0;
document.getElementById('resize4').style.top=2*(w-40)/9+20;
document.getElementById('resize5').style.width=(w-40)/3;
document.getElementById('resize5').style.height=2*(w-40)/9;
document.getElementById('resize5').style.left=(w-40)/3+20;
document.getElementById('resize5').style.top=2*(w-40)/9+20;
document.getElementById('resize6').style.width=(w-40)/3;
document.getElementById('resize6').style.height=2*(w-40)/9;
document.getElementById('resize6').style.left=2*(w-40)/3+40;
document.getElementById('resize6').style.top=2*(w-40)/9+20;
}
else if(browser>756) {
document.getElementById('resize1').style.width=(w-20)/2;
document.getElementById('resize1').style.height=(w-20)/3;
document.getElementById('resize1').style.left='0';
document.getElementById('resize1').style.top='0';
document.getElementById('resize2').style.width=(w-20)/2;
document.getElementById('resize2').style.height=(w-20)/3;
document.getElementById('resize2').style.left=(w-20)/2+20;
document.getElementById('resize2').style.top='0';
document.getElementById('resize3').style.width=(w-20)/2;
document.getElementById('resize3').style.height=(w-20)/3;
document.getElementById('resize3').style.left='0';
document.getElementById('resize3').style.top=(w-20)/3+20;
document.getElementById('resize4').style.width=(w-20)/2;
document.getElementById('resize4').style.height=(w-20)/3;
document.getElementById('resize4').style.left=(w-20)/2+20;
document.getElementById('resize4').style.top=(w-20)/3+20;
document.getElementById('resize5').style.width=(w-20)/2;
document.getElementById('resize5').style.height=(w-20)/3;
document.getElementById('resize5').style.left='0';
document.getElementById('resize5').style.top=2*(w-20)/3+40;
document.getElementById('resize6').style.width=(w-20)/2;
document.getElementById('resize6').style.height=(w-20)/3;
document.getElementById('resize6').style.left=(w-20)/2+20;
document.getElementById('resize6').style.top=2*(w-20)/3+40;
}
else {
document.getElementById('resize1').style.width=w;
document.getElementById('resize1').style.height=2*w/3;
document.getElementById('resize1').style.left='0';
document.getElementById('resize1').style.top='0';
document.getElementById('resize2').style.width=w;
document.getElementById('resize2').style.height=2*w/3;
document.getElementById('resize2').style.left='0';
document.getElementById('resize2').style.top=2*w/3+20;
document.getElementById('resize3').style.width=w;
document.getElementById('resize3').style.height=2*w/3;
document.getElementById('resize3').style.left='0';
document.getElementById('resize3').style.top=4*w/3+40;
document.getElementById('resize4').style.width=w;
document.getElementById('resize4').style.height=2*w/3;
document.getElementById('resize4').style.left='0';
document.getElementById('resize4').style.top=6*w/3+60;
document.getElementById('resize5').style.width=w;
document.getElementById('resize5').style.height=2*w/3;
document.getElementById('resize5').style.left='0';
document.getElementById('resize5').style.top=8*w/3+80;
document.getElementById('resize6').style.width=w;
document.getElementById('resize6').style.height=2*w/3;
document.getElementById('resize6').style.left='0';
document.getElementById('resize6').style.top=10*w/3+100;
}
});
</script>
