我正在尝试在页面加载后更改部分高度,但并不总是奏效.我知道我的代码改变高度是好的,它工作在窗口调整大小,只是初始调用后document.ready并不总是工作.
var $window = $(window);
function wrap_element_link_mobile(object,path) {
if ($(this).width() < 921 && !object.parent().is('a')) {
object.wrap("<a href='" + path + "'></a>");
} else if ($(this).width() > 920 && object.parent().is('a')) {
object.unwrap();
}
}
function resize_section() {
var sectionMinHeight = $(window).height() - $('header').height() - $('footer').height() - 7;
$('section').css('min-height',sectionMinHeight);
}
/* Called after document Load
================================ */
$(document).ready(function () {
var $mainlogo = $('#main-logo');
wrap_element_link_mobile($mainlogo,'/');
resize_section();
$window.resize(function () {
wrap_element_link_mobile($mainlogo,'/');
resize_section();
});
});
在初始调用中创建一个console.log之后,我发现它正在被调用,但由于某种原因它不起作用.
*编辑我看到的屏幕
注意滚动条,如果我调整窗口大小,它就会消失,并且是正确的高度.
解决方法
问题是与树标志！这是怎么回事？
您没有在图像上指定宽度和高度.当您这样做时,浏览器在document.ready上假定为0px高度1.在document.ready上,脚本会将头的高度计算为60px,并立即设置最小高度.
当图像加载时,标题的高度更改为101px;在这一点上,内容(标题,部分,页脚)增长了41px,因此是滚动条.
1如果图像从缓存加载,结果可能不同.
你有两个选择：
1：在HTML源中指定图像尺寸：
<img alt="Tree logo" id="main-logo" src="logo.png" width="83" height="101"/>
Demo here,似乎工作.
2：计算window.load而不是document.ready的高度.
3.更好的,使用CSS sticky footer(除非我误解了你想要做的).
