bootatrap页脚处理固定于底部不遮挡内容

搭建个人网站的时候遇见个问题,主要我觉得这种方式处理简单。

bootatrap自带页脚(如下)但是使用的时候会出现遮挡文字的情况;

差不多是这样

bootatrap页脚处理固定于底部不遮挡内容_第1张图片

主要是class属性 navbar-fixed-bottom



所以处理方法就是用js当页面的内容的高度大于页面的高度就移除该属性;此时页脚会在内容最下面

$(document).ready(function() {
	autoFooterHeight();
})
// 解决底部自动导航的问题
function autoFooterHeight() {
	// 获取内容的高度
	var bodyHeight = $("body").height();
	// 获取底部导航的高度
	var navHeight = $(".navbar").height();
	// 获取显示屏的高度
	var iHeight = document.documentElement.clientHeight || document.body.clientHeight;
	// 如果内容的高度大于(窗口的高度 - 导航的高度),移除属性样式
	if (bodyHeight > (iHeight - navHeight)) {
		$("#footer").removeClass("navbar-fixed-bottom");
	}
}

你可能感兴趣的:(Jquery,HTML,Javascript)