There is a pervasive problem between the front-end staff, how to automatically extend the height of a div to the height of the Browse window 100%. There are some different ways to do it, but I have come up with a method that I personally prefer. Today, I will share with you.
I don't know about you, but I'm trying to figure out how to get my layout vertically stretched to the 100% height of the page, which is a frustrating question. I want the div structure to extend automatically, but it just can't extend automatically, now, why can't he do that? Today I will share this solution with you.
Let's say you have the following HTML code document
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" >At the same time you have the following CSS style file
body { margin:0; padding:0; } #content { background: #EEE; border-left:1px solid #000; border-right:1px solid #000; padding:0 20px 0 20px; Margin:auto; Font:1.5em Arial, Verdana, Sans-serif; width:960px; height:100%; }This gives you this sample file . As you can see, the content container for the page does not automatically extend to the entire height of the page. Although we added "height:100%" to the CSS style file. Why is that?
Let me give you another way to think about HTML, where almost every HTML file has a set of containers that contain each other. Therefore, in our page, we first have a
When we define the "height:100%" style for <div id= "content" ></div> container, all we do now is tell it to extend its height to the entire height of the parent container that contains it. In this case, the div container is contained within the <body> container, so <div id= "content" ></div> is the entire height of the body. OK, so how does the body container extend the growth? It's like the height of the <div id= "content" ></div>, because we never tell it how to increase. So when we give <div id= "content" ></div> define "height:100%" style, we just tell it to ourselves.
To solve this problem, I need to tell the <body> container to be bigger, and the same problem with If we modify our CSS file, as shown below
HTML { min-height:100%; _height:100%; } body { margin:0; padding:0; min-height:100%; _height:100%; } #content { background: #EEE; border-left:1px solid #000; border-right:1px solid #000; padding:0 20px 0 20px; Margin:auto; Font:1.5em Arial, Verdana, Sans-serif; width:960px; min-height:100%; _height:100%; }That's it, here's the final effect we have now . This content container is now automatically extended to the height of the entire page.
Small tip: css100% height
Quick tip:css 100% Height
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
