Shulou(Shulou.com)05/31 Report--

This article mainly explains the "vue setting height:100% invalid how to solve", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "vue set height:100% invalid how to solve" it!

App.vue file

Export default {name: 'App'} # app {font-family:' Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; text-align: center; color: # 2c3e50;}

At this time, setting height: 100%; is invalid. It is found that height is still 0px in the Elements of chrome.

When you set a height of 100%, the height of the div is equal to the height of its parent element. The parent node of the div (vue mounted div) whose id is app above is the body tag, and the parent node of the body tag is the html tag. By default, the height of the html and body tags is auto, and the browser does not automatically add the height to the tag, so the html and body tags are 0, and the natural child div height setting to 100% does not work.

The following code should be added to the App.vue file style at this point:

Html,body,#app {height:100%;} Thank you for your reading. The above is the content of "how to solve the invalid setting of height:100% in vue". After the study of this article, I believe you have a deeper understanding of how to solve the problem of setting invalid height:100% in vue. The specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.