vue 页面高度自适应超出部分滚动条

可视区高：document.body.clientHeight
可视区高+边框线：document.body.offsetHeight
html:

<div :style="{ height: screenHeight + 'px' }" class='odiv'>最外层div</div>

js部分:document.body.clientHeight - 110(这个数值根据自身页面预留来设置,我页面是头部菜单固定,下面div内容自适应)

data:{screenHeight: document.body.clientHeight - 110(页面头部有固定高度)
}
watch: {screenHeight (val) {// 为了避免频繁触发resize函数导致页面卡顿，使用定时器if (!this.timer) {// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidththis.screenHeight = valthis.timer = truelet that = thissetTimeout(function () {// 打印screenWidth变化的值console.log(that.screenHeight)that.timer = false}, 400)}}}

在页面mounted时，挂载window.onresize方法：

mounted () {const that = thiswindow.onresize = () => {return (() => {// 可以限制最小高度// if (document.body.clientHeight - 240 < 450) {//   return// }window.screenHeight = document.body.clientHeight- 110that.screenHeight = window.screenHeight})()}
}

css

<style lang='less' scoped>.odiv{height: 100%;width: 100%;overflow-x: hidden;overflow-y: auto;}
</style>

vue 页面高度自适应超出部分滚动条相关推荐

html高度没有滚动条,Div扩展了页面高度，但没有滚动条
我在页面左侧有一个div用于导航链接.点击标题可展开链接的子集.我将此div设置为页面高度的100%,以便列占据页面的整个左侧.当所有子类别都展开时,会出现问题. div的内容在页面底部运行,但不添加 ...
vue iframe高度自适应
我们在开发过程中会遇到iframe嵌入外部页面问题,通常外部页面高度不一,如果我们写死iframe高度,就会出现滚动条.通过以下设置会避免滚动条情况 <iframeref="ifram ...
html 图片高度页面高度自适应,怎样让网页图片高度自适应宽度
[摘要] 你肯定知道width百分比可以实现图片宽度的自适应,那么你知道高度也可以根据宽度变话而自适应比变化么,看下本文就了解了! 当前响应式布局,内容尺寸自适应设备是众多网站开发者的选择,毕竟现在显 ...
ant design vue table 高度自适应_2年Vue项目实战经验汇总！
前言 vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,由于其轻量和自底向上的渐进式设计思想,使其不仅仅被应用于PC系统,对于移动端,桌面软件(electronjs)等也有广泛的应用,与 ...
iframe高度自适应，取消滚动条
项目中碰到左侧是一个列表,是固定定位,点击不同的列表选项右侧引入不同的iframe地址文件,但是iframe设置属性的时候高度只识别px,设置百分百之类的都无效,并且不想要iframe本身的滚动条,页 ...
ant design vue table 高度自适应_Vue.JS 实现拼拼乐小游戏项目
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火 ...
ant design vue table 高度自适应_很受欢迎的vue前端UI框架
最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
ant design vue table 高度自适应_html之table表格
概述 html中提供了一个table表格的东西,不过到现在来说,用处基本上不是很大,但有些报表的项目中还是会用到的.此内容可以稍微一带而过,用到的时候,再回来复习也不迟.表格由 <table&g ...

vue 页面高度自适应超出部分滚动条

vue 页面高度自适应超出部分滚动条相关推荐

最新文章

热门文章

vue 页面高度自适应 超出部分滚动条

vue 页面高度自适应 超出部分滚动条相关推荐

最新文章

热门文章

vue 页面高度自适应超出部分滚动条

vue 页面高度自适应超出部分滚动条相关推荐