DIV + CSS adaptive window height, divcss adaptive window

Last Update:2014-10-14 Source: Internet

Author: User

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

DIV + CSS adaptive window height, divcss adaptive window
Java code

<Html>
<Head>
<Title> DIV + CSS adaptive window height </title>
<Style type = "text/css">
Body {
Margin: 0;
Padding: 0;
Color: # ffffff;
}
# Header {
Width: 100%;
Height: 100px;
Margin: 0 auto;
Padding: 0px;
Background-color: #000099;
}
# Wrapper {
Width: 100%;
Margin: 0 auto;
Padding: 0px;
Background-color: # ffffff;
}
# Nav {
Float: left;
Width: 120px;
Margin: 10px 10px 10px 5px;
Background-color: #009900;
}
# Content {
Margin: 10px 10px 10px 145px;
Background-color: #990099;
}
# Footer {
Position: absolute;
Width: 100%;
Height: 60px;
Bottom: 0;
Background-color: #990000;
}
</Style>
</Head>
<Body>
<Div id = "header"> Header </div>
<Div id = "wrapper">
<Div id = "nav"> Nav </div>
<Div id = "content"> Content </div>
</Div>
<Div id = "footer"> Footer </div>
</Body>
</Html>

When the height of nav and content is greater than one page, this requirement cannot be met. Therefore, you need to set min values for nav and content.

The code for the page designed by DIV + CSS is as follows:

On the first floor, you can fix it. You are not competent. I didn't ask you to answer anything. In the future, do not know about Baidu. You are insulting all those involved in Baidu.
According to your problem, it is obvious that div cannot automatically apply the height. In general, the outer div cannot contain the inner element.
Let's first explain why this phenomenon occurs?
Because the inner div is fully set to float, that is, the float attribute, once an element floats, it does not occupy the element space. The outer div cannot contain the inner element.
Solution:
Method 1: add an element at the end of the element in the inner layer, and set this element to not float, so that the inner element of the outer element is forcibly wrapped, such as <div style = "clear: both; float: none "> </div>
Method 2: Set overfloat to hidden or auto, zoom to 1, and zoom to be compatible with ie6.
Method 3: Set the height of the outer element to a fixed value (this is not recommended, but this is the perfect solution)
Method 4: Through the content attribute of css, this is a bit complicated and I will not mention it. Few people use this attribute anyway.

Finally, I would like to ask, are you a person on the first floor?

Add clear: both; to all the outer elements that do not participate in the floating, and forcibly clear the floating

DIV + CSS adaptive height

Height: auto! Important;
Height: 200px;/* assume that the minimum height is 200px */
Min-height: 200px;

This setting is compatible with ie6, 7,8, Firefox, and so on...

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.

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

DIV + CSS adaptive window height, divcss adaptive window

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support