vue+elementUI 实现内容区域高度自适应的示例
步骤很简单:
通过动态绑定属性给<el-main></el-main>绑定高度,而高度通过 innerHeight 获取,减去你的头部和底部高度,剩下的就是整个内容区域的高度了!话不多说,上代码
//defaultHeight是绑定的属性<el-main :style='defaultHeight'> <router-view /></el-main> //注意:这里的defaultHeight必须是对象,不懂的可以去官网看下apidata() { return { defaultHeight: { height: '' } };},methods: { //定义方法,获取高度减去头尾 getHeight() { this.defaultHeight.height = window.innerHeight - 90 + 'px'; }},created() { //页面创建时执行一次getHeight进行赋值,顺道绑定resize事件 window.addEventListener('resize', this.getHeight); this.getHeight();}
当然,还可以通过CSS3计算高度
<style>.el-main { height: calc(100vh - 70px);}</style>
以上就是vue+elementUI 实现内容区域高度自适应的示例的详细内容,更多关于vue+elementUI 实现内容区域高度自适应的资料请关注好吧啦网其它相关文章!
相关文章:
1. 解决Android Studio 格式化 Format代码快捷键问题2. php解决注册并发问题并提高QPS3. SpringBoot+TestNG单元测试的实现4. Python使用urlretrieve实现直接远程下载图片的示例代码5. 完美解决vue 中多个echarts图表自适应的问题6. vue实现web在线聊天功能7. Springboot 全局日期格式化处理的实现8. 在Chrome DevTools中调试JavaScript的实现9. JavaEE SpringMyBatis是什么? 它和Hibernate的区别及如何配置MyBatis10. Java使用Tesseract-Ocr识别数字
