美文网首页
vue子组件的高度超过视口高度,父组件的高度设置了100%,父组

vue子组件的高度超过视口高度,父组件的高度设置了100%,父组

作者: A郑家庆 | 来源:发表于2021-06-25 16:38 被阅读0次

项目内容设置高度100%;左侧是一个公用的菜单,为了让它铺满给它设置了高度100%,右侧内容也是100%;body也是100%;然后右侧有一个markdown输入框,当不断输入内容时这时候右侧的高度就会不断变化,但是发现左侧的高度不会随着右侧高度变化而变化.
解决:因为父组件设置了100%,所以相当于是浏览器的高度,右侧高度超过浏览器高度时,左侧高度是不会改变的,这时候如果用监听右侧高度的变化有点麻烦,而且对浏览器性能也不好,所以可以用display:flex布局,同时去掉父组件高度即可,这样子父组件高度就会跟随右侧高度变化而变化,flex可以让子组件(子元素)把父组件(父元素)撑开

相关文章

网友评论

      本文标题:vue子组件的高度超过视口高度,父组件的高度设置了100%,父组

      本文链接:https://www.haomeiwen.com/subject/ccsoyltx.html