JQuery设置页面高度

开发工具及关键技术：Visual Studio 2017 Html JQuery
撰写时间：2019-02-18

这个功能挺简单的，也就是那么几行代码而已
这个功能也挺实用的，主要是页面大小跟浏览器窗口大小一样时都会用得到
好处就是可以将页面大小设置的跟浏览器窗口一样大，也可以设置页面放大缩小改变页面属性，不让内容部分溢出

效果：

页面缩放100%

页面缩放110%

Html代码部分：

Html代码一共有4个div，分别:
Navbar 导航栏
Row 行
Main-container 主容器
Footer 底部

主容器(main-container)内代码

JQuery代码部分：

var l = $("#LeftMenu");//声明变量l获取#LeftMenu（左侧菜单）
var s = $("#sidabar");//声明变量l获取#sidabar （工具栏）
var mc = $("#main - content");//声明变量l获取##main-content（主要内容）
var title = $("#title").height() + 1;//声明变量title 是#title的高度+1 1是#title所属标签的下边框的值
var nav = $('div[name =“nav"]').height();//声明变量nav 是div内name=“nav”的高度
var shr = $(".showhide-row").height();//声明变量shr = .showhide-row的高度
var breadcrumbs = (nav - shr);//声明变量breadcrumbs = nav - shr
var lock = $(".lock").height() + 11;//声明变量lock = #lock的高度+11 11是#lock的padding值和border值
var foot = $(".footer").height();//声明变量 foot=.footer的高度

var height = $(window).height();//声明变量 height = window的高度

变量height设置为全局变量时，达不到我们想要的效果，所以要设计为局部变量

封装setHeight()方法

var ch = height - (title + nav + foot);//声明ch = height - （title + nav + foot）
var sh = height - (title + nav + foot + lock);//声明ch = height - （title + nav + foot + lock）
l.css("height", ch);//给变量l设置css属性 height（高度）= ch
s.css("height", sh);//给变量s设置css属性 height（高度）= sh
mc.css("height", ch);//给变量mc设置css属性 height（高度）= ch

封装setHeightH()方法

var ch = height - (title + shr + foot);//声明ch = height - （title + shr + foot）
var sh = height - (title + shr + foot + lock);//声明ch = height - （title + shr + foot + lock）
l.css("height", ch);//给变量l设置css属性 height（高度）= ch
s.css("height", sh);//给变量s设置css属性 height（高度）= sh
mc.css("height", ch);//给变量mc设置css属性 height（高度）= ch

封装setHeightA()方法

var ch = height - breadcrumbs;//声明ch = height - breadcrumbs
var sh = height - (breadcrumbs + lock);//声明ch = height - （breadcrumbs + lock）
l.css("height", ch);//给变量l设置css属性 height（高度）= ch
s.css("height", sh);//给变量s设置css属性 height（高度）= sh
mc.css("height", ch);//给变量mc设置css属性 height（高度）= ch

添加根据浏览器变化的方法

var browserHeight = $(window).height();//声明变量 browserHeight(浏览器高度) = window的高度

变量browserHeight 设置为全局变量时，达不到我们想要的效果，所以要设计为局部变量

$(window).resize(function () {var browserHeight = $(window).height();if (browserHeight >= 983) { //判断变量browserHeight是否大于或者等于983, 是的话$("#navbar").show();//#navbar（导航栏）显示$(".showhide-row").show();//.showhide - row（导航栏下方显示隐藏按钮）显示$(".footer").show();//.footer（底部）显示setHeight();//调用setHeight()方法} else { //不是的话$("#navbar").hide();//#navbar（导航栏）隐藏$(".showhide-row").hide();//.showhide - row（导航栏下方显示隐藏按钮）显示$(".footer").hide();//.footer（底部）隐藏setHeightA();//调用setHeightA()方法}
});

JQuery设置页面高度相关推荐

设置页面高度为浏览器可视窗口大小
##设置页面高度为浏览器可视窗口大小## <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
Android中FlowLayout的使用方法，监控布局大小并设置页面高度
博客来源: 工作中需要动态的为页面插入提示语,并根据提示语的不同进行换行操作.提示语数量不同,长度不同,那么就需要页面具有流动性话不多说,上代码这是一个工具类,复制进行小修改即可[下方有我调用参考 ...
JS 动态设置页面高度
JavaScript获取页面.屏幕尺寸大小参数 //网页可见区域宽 document.body.clientWidth //网页可见区域高 document.body.clientHeight //网 ...
【Javascript】Javascript动态设置页面高度
1.动态设置父页面iframe高度 <body onload="iframeHeight()"><script type="text/javascrip ...
jquery设置div高度和easyui的dialog动态的指定高度
2019独角兽企业重金招聘Python工程师标准>>> QUERY设定div的高度: $("div").height(300); 或者 $("div&q ...
js 根据浏览器高度设置页面高度
<script>function setContentHeight(argument) {document.getElementsByClassName('container')[0].s ...
jquery 设置元素拖动效果
jquery 设置页面元素可拖动效果使用: setEleDrag('.go_manager_vote',120,60,function(){ console.log('执行点击操作'); } ...
html页面高度不同浏览器兼容性设置
页面需要嵌套在跨域的iframe中,而页面高度不固定,需要每个页面把自己的高度获得后,通过js通知iframe调整显示. 而页面在获得自己的高度时,发现总是比预想的大.经过参考别人的博客,发现原来是w ...
vue设置页面的高度100%
1.设置全局页面高度在vuecli init的默认工程里面,App.vue 页面中加 //App.vue 页面中 <style>html,body,#app{height: 100%;b ...

JQuery设置页面高度

JQuery设置页面高度

JQuery设置页面高度相关推荐

最新文章

热门文章