Home > Developer > CSS

how CSS works height:100%; make it work

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

When you set the height of a page element to 100%, it is expected that such an element will fill the height of the entire browser window, but in most cases, this does not have any effect. Do you know why height:100% it doesn't work?

It is common sense that when we define the height of an element with a CSS height attribute, this element should extend the corresponding spatial distance in the vertical space of the browser as set. For example, if apelement of CSS isheight: 100px;, it should occupy a height of 100px in the vertical space of the page.

Rather, the height of the percentage is set at the height of the container according to the parent element of this element. So, if you put apThe height is set toheight: 50%;, and the height of its parent element is 100px, then the height of this p should be 50px.

then why height:100%; does not work

When designing a page, you put apelement, you want it to occupy the entire window height, the most natural way you will give thispAdd toheight: 100%;The CSS property. However, if you set the width towidth: 100%;, the width of this element expands immediately to the entire horizontal width of the window. Will this be the height?

Wrong.

To understand why not, you need to understand how the browser calculates the height and width. The Web browser considers the open width of the browser window when calculating the effective width. If you don't set any default values for width, the browser automatically tiles the contents of the page to fill the entire horizontal width.

But the height of the calculation method is completely different. In fact, the browser does not calculate the height of the content at all, unless the content is outside the window (causing the scroll bar to appear). Or you set an absolute height for the entire page. Otherwise, the browser will simply let the content piled down, the height of the page is not considered at all.

Because the page does not have a default height value, when you set the height of an element to a percentage height, you cannot calculate its height based on the height of the parent element. In other words, the height of the parent element is just a default value:height: auto;。 When you ask the browser to calculate a percentage height based on such a default value, you can only getundefinedThe result. is a null value, the browser does not react to this value.


The above example shows that the parent element does not set a fixed height, so the height of the child elementheight: 100%It won't work. You can determine the height of the child element based on the background color of the parent element.100%。

Well, if you want to make a percentage of an element highly height:100%; function, 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: 



Now you've given thispHas a height of 100%, it has two parent elements<body>And。 In order for your P percentage to work, you must set<body>AndThe height.
 





 From this demo you can see that height:100%;  It worked. 


 in use height:100%;  Some things to be aware of when


1, Margins and padding will let your page appear scroll bar, perhaps this is you do not want.


2. If the actual height of your element is greater than the percentage height you set, the height of the element will automatically expand.

                

                    
This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or
reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or
complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

                

            


                                                                    

        

            

                

                                        

                        

                    

                

                

    

                    
Contact Us

            
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
                products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
                content of the page makes you feel confusing, please write us an email, we will handle the problem
                within 5 days after receiving your email.

            

                If you find any instances of plagiarism from the community, please send an email to:
                info-contact@alibabacloud.com
                and provide relevant evidence. A staff member will contact you within 5 working days.
            

            



                

                

            

        

    

    


    


  

    

      

        

          

            

              
A Free Trial That Lets You Build Big!

              
 Start building with 50+ products and up to 12 months usage for Elastic Compute Service 

              

                Get Started for Free
              

            

          

          

            

              
    
                
  • 
                  
    Sales Support
    
                  
    
                    1 on 1 presale consultation
                  
    
                  
    
                    Chat
                    Contact Sales
                  
    
                
    • 
                
  • 
                  
    After-Sales Support
    
                  
    
                    24/7 Technical Support
                    6 Free Tickets per Quarter
                    Faster Response
                  
    
                  
    
                    Open a Ticket
                  
    
                
    • 
                
  • 
                  
    
                  
     Alibaba Cloud offers highly flexible support services tailored to meet your exact needs. 
    
                  
    
                    Learn More
                  
    
                
    •