网站链接:
[http://50.87.144.37/~projtest/team/design/Cece/][1]
jQuery:
$(document).ready(function () {
var pgHeight = $(window).height();
//alert(pgHeight);
$('.sitewid').css('min-height', pgHeight - 150)
var ltHeight = $('.mainImg').height();
$('.left').css('height', ltHeight);
$('.links').css('height', ltHeight);
var dHeight1 = $('.mainImg').height();
});
$(window).resize(function () {
setTimeout(function () {
var lt1Height = $('.mainImg').height();
//alert(lt1Height);
$('.left').css('height', lt1Height);
$('.right').css('height', lt1Height);
$('.links').css('height', lt1Height);
$('.social').css('top', lt1Height / 2.8);
}, 50);
});
HTML:
<div id="container">
<div class="sitewid">
<div id="header">...</div>
<div id="content" class="mainPg">
<img class="mainImg" src="images/bnw.jpg" alt=" ">
<div class="left">...</div>
<div class="right mainRHeight">...</div>
<p class="cls"></p>
</div>
<div id="footer">...</div>
</div>
</div>
这是一个响应式设计。该页面在Firefox中可以正常工作,但是在Chrome和其他Webkit浏览器中查看时,jquery无法正常运行。类“
mainImg
”将是动态图像。因此,.left
和.right
都将获得其高度,并且将高度分配给两个部分。当我检查镀铬的元素或在ipad屏幕上双击时,内容进入所需的位置,但是在页面首次加载时会以随意的方式显示。我在这里做错了什么?脚本语法在head标签中。我本人已经学习了jQuery,所以我确定我在这里遗漏了一些东西,因为在该项目之前我也曾遇到过这个问题。 :/ 最佳答案
这样尝试
$(document).ready(function () {
var pgHeight = $(window).height();
//alert(pgHeight);
$('.sitewid').css('min-height', pgHeight - 150)
var ltHeight = $('.mainImg').height();
$('.left').css('height', ltHeight);
$('.links').css('height', ltHeight);
var dHeight1 = $('.mainImg').height();
resizeWindow();
});
$(window).resize(function () {
setTimeout(resizeWindow, 50);
});
function resizeWindow() {
var lt1Height = $('.mainImg').height();
//alert(lt1Height);
$('.left').css('height', lt1Height);
$('.right').css('height', lt1Height);
$('.links').css('height', lt1Height);
$('.social').css('top', lt1Height / 2.8);
}