Home > Developer > JavaScript
How to Make height: 100%; take effect, height100 % Take Effect
Why is the height: 100%? when designing a page, you placedivElement, you want it to fill the whole window height, the most natural way, you will give thisdivAddheight: 100%;. However, if you set the widthwidth: 100%;The width of the element is immediately extended to the whole horizontal width of the window. Is the height the same? Error. To understand why not, you need to understand how the browser calculates the height and width. When calculating the valid width, the Web browser will consider the open width of the browser window. If you do not set any default value for the width, the browser will automatically fill the page content with the whole horizontal width. However, the height calculation method is completely different. In fact, the browser does not calculate the height of the content at all, unless the content is beyond the window range (leading to the appearance of the scroll bar ). Or you can set an absolute height for the entire page. Otherwise, the browser will simply pile up the content, and the page height does not need to be considered. Because the page does not have the default height value, when you set the height of an element to the percentage height, you cannot calculate the height of the parent element based on the obtained height. In other words, the height of the parent element is only a default value:height: auto;. When you ask the browser to calculate the percentage height based on such a default value, you can only getundefined. That is, a null value. The browser does not respond to this value. In the above example, the parent element does not set a fixed height, so the height of the child elementheight: 100%And does not work. You can use the background color of the parent element to determine whether the height of the child element is not100%. Then, if you want to make the percentage height of an elementheight: 100%;You need to set a valid value for the height of all the parent elements of this element. In other words, you need to do this: divThe height is 100%. It has two parent elements.<body>And. To make the percentage height of your div work, you must set<body>And. <Html style = "height: 100%;"> <body style = "height: 100%;"> <div style = "height: 100%; "> <p> the height of this div is 100% </p> </div> </body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
