Home > Developer > Web Develop
How to Use width height for proper layout and width for proper layout
Two questions
1) Set width and height to percentage
2) What does max-width and max-height mean?
0, max-width, and max-height are used in graphic elements because the image size exceeds the size of the parent container, if the value is exceeded, it is displayed by this value. If the value is not exceeded, the layout is based on width height.
1. All HTML elements have width and height, and the HTML Tag attribute and CSS attribute play the same role in width and height.
2. For the width usage percentage problem, width and height both refer to the calculation of width and height based on the width and height of the parent container. Although percentages are used, they are not the actual values, the width and height of the parent container are only reference values for calculation. Although the child element is included by the parent element, the width and height are not included. In addition, it is not surprising that width height can be set to 200%. The height of width is calculated based on the parent element.
3. Although there are margin border padding in the box model, if we use the percentage, you will find that both margin and padding are calculated based on the width of the parent container, however, it is not related to height, so padding-top, padding-bottom, margin-top, and margin-bottom are all calculated based on the width of the parent container, and the height is no longer within the scope of calculation. However, border cannot use percentages. You can try it and it is definitely invalid. These give us an inspiration: we usually use percentages for screen adaptation for width during actual development, but do not control the height by percentages. Generally, the height of a container is adaptive. However, the distance between adjacent containers is adjusted using margin or padding. We also use absolute pixels to adjust these two containers. In other words, the adjustment gap is usually fixed. Of course, for some components with high requirements, we do use absolute pixel units to determine, but the container size is best adaptive. Margin is used to avoid the background color, and padding is used to fill the background color.
To sum up:
1) Percentage of all widths
2) container height, adaptive
3) the height of the specific component is determined by em px.
4) Adjust the container gap. padding margin border only uses em px.
5) js dynamic control is used for special fixed locations. For those with fixed locations, we naturally adopt js dynamic control,
It is like: Sometimes we want to put the company information at the bottom of the browser, but we are not sure about the content to be presented by the company, so we need to dynamically obtain the height to determine the position of the following elements. As follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.1 // EN"
Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en">
<Head>
<Title> div layout with three columns and div always positioned at the bottom of the browser </title>
<Style type = "text/css" media = "screen">
Body {
Margin: 0;
Padding: 0;
}
# Header {
Height: 50px;
Background-color: # EAEAEA;
Border: 1px solid #333;
Padding: 4px;
}
# Left {
Position: absolute;
Left: 0;
Top: 30px;
Padding: 0;
Width: 200px;
Color: #333;
Background: # eaeaea;
Border: 1px solid #333;
}
. Content {
Position: relative;
Top: 30px;
Margin-left: 220px;
Margin-right: 220px;
Margin-bottom: 20px;
Color: #333;
Background: # ffc;
Border: 1px solid #333;
Padding: 0 10px;
}
# Right {
Position: absolute;
Right: 0;
Top: 30px;
Padding: 0;
Width: 200px;
Color: #333;
Background: # eaeaea;
Border: 1px solid #333;
}
# DivContent {
Position: relative;
Width: 100%;
}
# Left p {
Padding: 0 10px;
}
# Right p {
Padding: 0 10px;
}
P. top {
Margin-top: 20px;
}
. DivBottom {
Background-color: # f1f1f1;
Border: 1px solid #333;
Position: relative;
Width: 100%;
Margin-top: 20px;
}
. Divswitchbottom {
Background-color: # f1f1f1;
Border: 1px solid #333;
Position: absolute;
Bottom: 0;
Width: 100%;
}
</Style>
<Script language = "JavaScript">
Function sameHeight (){
Var documentBodyHeight;
If (typeof windows )! = 'Undefined '){
// Non-IE
Alert ('non-ie ');
DocumentBodyHeight = windows. innerHeight;
} Else if (document.doc umentElement & (document.doc umentElement. clientWidth | document.doc umentElement. clientHeight )){
// IE 6 + in 'Standards compliant Mode'
Alert ('ie 6 + ');
DocumentBodyHeight = document.doc umentElement. clientHeight;
} Else if (document. body & (document. body. clientWidth | document. body. clientHeight )){
// IE 4 compatible
Alert ('ie 4 ');
DocumentBodyHeight = document. body. clientHeight;
}
// Alert (documentBodyHeight );
If (document. getElementById ('left'). clientHeight> documentBodyHeight)
{// Alert ('OK ');
Document. getElementById ('didcontent'). style. height = document. getElementById ('left'). clientHeight + document. getElementById ('left'). offsetTop + "px ";
Document. getElementById ('divbottom '). className = 'divbottom ';
} Else {
// Alert ('not OK ');
Document. getElementById ('divbottom '). className = 'divswitchbottom ';
}
}
</SCRIPT>
</Head>
<Body onload = "sameHeight ()">
<Div id = "header">
<P> The Header </p>
</Div>
<Div id = "divContent">
<Div id = "left">
<P> The Body Left </p>
</Div>
<Div>
<P> The body Center </p>
</Div>
<Div id = "right">
<P> The body Right </p>
</Div>
</Div>
<Div id = "divBottom"> The Bottom </div>
</Body>
</Html>
If width is greater than height max, it is equal to width.
Otherwise, max is equal to height.
Use absolute width: 100px in html; height: 100px in different resolutions; use relative width: 40%; height
Set the width attribute of the outermost div to a fixed value such as: width: 1000px;. This is the most simple and effective method used by many websites.
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
