这好像你没有的图像,但三个图像(和中心标记不应该再使用)。
您必须等待图像加载完成后才能在window.onload上获取图像的总高度,但是当它们浮动时,这也不准确,所以你真正需要做的是获得CSS的权利。
这不是应该漂浮的图像,因为它们不是真正的兄弟姐妹,而是锚点,而且看起来所有的锚点都在DIV内,所以将DIV定位为正确的移动。
棘手的部分是让DIV的大小与其可能包含的任何及所有图像相同,常见的技巧就是将其浮动,因为这会使其自动调整正确,但如果您有其他内容(你没有),你需要清除浮动。
知道这一切,我们可以将ID添加到DIV所以它更容易的目标:
,并更改CSS相应
#container {
position: relative;
width: 100%;
float: left;
}
a {
position: relative;
width:33.3333%;
float:left;
height: auto;
}
img {
border:0px;
padding:0px;
width: 100%;
height: auto;
}
body {
height:100%;
width:100%;
margin:0px;
}
iframe {
overflow-y: scroll;
overflow-x: hidden;
border:0px;
padding:0px;
width:100%;
height:auto;
}
,然后将所有我们要做的就是让窗口的高度并减去DIV的高度,但如前所述,我们必须等到所有图像加载完毕。
要使其工作每次窗口大小改变时,我们可以把它连接到resize事件,然后又触发页面加载该事件:
$(window).on('load', function() {
$(this).on('resize', function() {
var imageHeight = $('#container')[0].clientHeight,
windowHeight = $(this).height();
$('iframe').height(windowHeight - imageHeight);
}).trigger('resize');
});