让div元素自适应浏览器屏幕高度

た 入场券 2022-05-11 03:36 1089阅读 0赞

很多时候都需要让div或者其他标签元素自适应浏览器屏幕高度，比如左侧菜单高度自适应

所以可以用window.innerHeight然后绑定到元素上面

如图，我用vue，jq的也差不多。反正只要获取到window.innerHeight就行了。

  1. <template>
  2.   <div id="app" :style="htmlHeight">
  3.   </div>
  4. </template>
  5. <script>
  6. export default {
  7.   name: 'App',
  8.   data () {
  9.     return {
  10.       htmlHeight: {
  11.         height: '300px'
  12.       }
  13.     }
  14.   },
  15.   methods: {
  16.     getHtmlHeight () {
  17.       let htmlHeight = window.innerHeight + 'px'
  18.       this.$set(this.htmlHeight, 'height', htmlHeight)
  19.     }
  20.   },
  21.   mounted () {
  22.     this.getHtmlHeight()
  23.   }
  24. }
  25. </script>
  27. <style>
  28. *{
  29.   margin: 0;
  30.   padding: 0;
  31. }
  32. #app{
  33.   background: red;
  34. }
  35. </style>

不过这个也有缺点。。。就是获取到的高度不包括任务栏占有的。

并且如果刚开始浏览器窗口是非最大状态，那么获取到的就是非最大状态下的高度，这样当用户在非最大状态下加载页面，然后又点击最大化按钮。。。那么就会出现空白。所以还是要慎重选择。

发表评论

表情：
评论列表 （有 0 条评论，1089人围观）

还没有评论，来说两句吧...

相关阅读