Solve the problem that the front-end container cannot fill the screen
The difference between px, rpx, em, rem, vw, vh various pixel units
Detailed explanation of the use of css3 new units vw, vh, vmin, vmax
Learning element-UI to write the page of the management system, I found that when the menu bar shrinks, the result is like this
The red box is the layout of each section in the container, but there is a blank space under the container that does not fill the screen. How can it fill the screen?
You can use the hight property in css to make the height full.
I have tried the following:
- 1
style=“height:800px;”- 2
style=“height:100%;”- 3
style=“height:100vh;”
The first attempt is to fill the current screen, but when my screen is enlarged to 100%, if I shrink the screen to a certain extent, the bottom will still be empty. (Because the wording of px is hard-coded)
The second attempt did not change.
The third attempt fills the current screen, and it can also be zoomed out, so my needs are met
Copyright statement: This article is an original article of CSDN blogger "Want to go to the beach~", following the CC 4.0
BY-SA copyright agreement, please attach the original source link and this statement for reprinting.
Original link: https://blog.csdn.net/m0_46127185/article/details/122921902