Shulou(Shulou.com)06/02 Report--

This article is to share with you what the five commonly used Div highly adaptive methods are, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Five commonly used Div highly adaptive methods

1. Background image filling

This is the most widely used practice, without hacks, and is recommended:

SourceCodetoRun

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Equalheight (method with the same column height) title > body {padding:0; margin:0; font-size:12px; font-family:Arial,Helvetica,sans-serif; line-height:140%; background:#E7DFD3;} # middle {width:580px; float:left; background:#FFFFFF; text-align:left;} # header,#footer {background:#E8E8E8; width:750px Text-align:center;} # sideleft {width:580px; float:left; position:relative; margin-left:-580px;} # sideright {width:170px; float:right; position:relative; margin:0-170px00; background:#F0F0F0;} # footer {clear:both;} H2 style p {margin:0; padding:.8em;} H2 style > / el [XSS _ clean] = t } / /] > script > head > Headh2 > sidelefth3 >

Default length lengthened page p >

It is not easy to move from a fixed, pixel-based design method to a flexible, relative design method. But if used properly, it can be a natural choice to enhance affinity and ease of use without having to make design sacrifices. P >

Pixels are non-scalable dots on a computer screen, and an h4 is a word-size square. Due to the change in font size, H4 represents the relative unit of the text size that the user likes. P >

It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design method, you can make full use of computer monitors and browsers. P >

You may want your site to be displayed in a certain way, but your users may want to see it differently. Anything imposed on users is not conducive to ease of use, thus harming the success of the site. P >

It is not easy to move from a fixed, pixel-based design method to a flexible, relative design method. But if used properly, it can be a natural choice to enhance affinity and ease of use without having to make design sacrifices. P > div > siderighth3 >

It is not easy to move from a fixed, pixel-based design method to a flexible, relative design method. But if used properly, it can be a natural choice to enhance affinity and ease of use without having to make design sacrifices. P >

Pixels are non-scalable dots on a computer screen, and an h4 is a word-size square. Due to the change in font size, H4 represents the relative unit of the text size that the user likes. P >

It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design method, you can make full use of computer monitors and browsers. P >

You may want your site to be displayed in a certain way, but your users may want to see it differently. Anything imposed on users is not conducive to ease of use, thus harming the success of the site. P > div > div > Footer address >

Production: Yzci.Comp > div > body > html >

[you can modify part of the code before running to view the effect]

two。 Using script to control the height of columns (1)

You need to know the height of which column in advance and use it as a benchmark to control it with script.

Document.getElementById ("sideleft") .style.height=document.getElementById ("sideright") .scrollHeight + "px"

The above code controls the height of sideright based on the base height of sideleft.

The code is simple, but passive:

SourceCodetoRun

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Equalheight (using JS to achieve the same column height) title > body {padding:0; margin:0; font-size:12px; font-family:Arial,Helvetica,sans-serif; line-height:140%; text-align:center; background:#E7DFD3;} # wrap {width:750px; margin:0auto; / * overflow:hidden;*/} # header {background:#E8E8E8 } # sideleft {width:580px; float:left; background:#FFF; text-align:left;} # sideright {width:170px; float:left; background:#F0F0F0; text-align:left;} # footer {background:#E8E8E8; width:100%; float:left;} H2 style h3 {font-size:20px;} style > head > Headh2 > div > sidelefth3 >

It is not easy to move from a fixed, pixel-based design method to a flexible, relative design method. But if used properly, it can be a natural choice to enhance affinity and ease of use without having to make design sacrifices. P >

Pixels are non-scalable dots on a computer screen, and an h4 is a word-size square. Due to the change in font size, H4 represents the relative unit of the text size that the user likes. P >

It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design method, you can make full use of computer monitors and browsers. P >

You may want your site to be displayed in a certain way, but your users may want to see it differently. Anything imposed on users is not conducive to ease of use, thus harming the success of the site. P >

It is not easy to move from a fixed, pixel-based design method to a flexible, relative design method. But if used properly, it can be a natural choice to enhance affinity and ease of use without having to make design sacrifices. P >

Pixels are non-scalable dots on a computer screen, and an h4 is a word-size square. Due to the change in font size, H4 represents the relative unit of the text size that the user likes. P >

It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design method, you can make full use of computer monitors and browsers. P >

You may want your site to be displayed in a certain way, but your users may want to see it differently. Anything imposed on users is not conducive to ease of use, thus harming the success of the site. P > div > siderighth3 >

It is not easy to move from a fixed, pixel-based design method to a flexible, relative design method. But if used properly, it can be a natural choice to enhance affinity and ease of use without having to make design sacrifices. P >

Pixels are non-scalable dots on a computer screen, and an h4 is a word-size square. Due to the change in font size, H4 represents the relative unit of the text size that the user likes. P >

It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design method, you can make full use of computer monitors and browsers. P >

You may want your site to be displayed in a certain way, but your users may want to see it differently. Anything imposed on users is not conducive to ease of use, thus harming the success of the site. P > div > document.getElementById ("sideleft"). Style.height=document.getElementById ("sideright") .scrollHeight + "px" script > Footer address >

Production: Yzci.Comp > div > div > body > html >

[you can modify part of the code before running to view the effect]

3. Using script to control the height of columns (2)

There is no need to know the height of which column in advance, the script automatically determines.

The code is complex, with a bit of delay:

SourceCodetoRun

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> script controls three rows, three columns, adaptive height DIV layout title > script > body {font-size:75%; font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; line-height:100%; margin:5px; padding:0px;} # header,#mid,#footer {width:760px; margin:0pxauto; padding:0px;} # header {background:#F4F4F4; height:60px Margin-bottom:5px;} h4,h6 {padding-top:25px; color:#708090; text-align:center; margin:0;} # fbox {background:#F1F1F1; width:195px; float:left;} # mbox {background:#DFF7FF; margin:0px5px0px; padding:0px; float:left; width:360px;} # sbox {background:#FFEBCC; width:195px; float:right;} p {margin:0px; padding:10px Text-indent:2em; line-height:130%;} # footer {background:#CDDBED; border-top:solid5px#FFFFFF; text-align:center; height:60px; clear:both;} style > head > script controls three rows and three columns adaptive height DIV layout h4 > div >

Affinity is not just about blind people and screen readers. There are many people who are not blind but have visual impairment-you and I will be one of them when we get old. One of the easiest ways to make a site more approachable is to allow users to change the size of the text; refusing to provide such a choice deprives users of their initiative and is likely to make it impossible for users to read comfortably. P >

Affinity is not just about blind people and screen readers. There are many people who are not blind but have visual impairment-you and I will be one of them when we get old. One of the easiest ways to make a site more approachable is to allow users to change the size of the text; refusing to provide such a choice deprives users of their initiative and is likely to make it impossible for users to read comfortably. P > div >

Affinity is not just about blind people and screen readers. There are many people who are not blind but have visual impairment-you and I will be one of them when we get old. One of the easiest ways to make a site more approachable is to allow users to change the size of the text; refusing to provide such a choice deprives users of their initiative and is likely to make it impossible for users to read comfortably. P >

If designers specify the text size in pixels, most users will not be able to scale the text because InternetExplorer changes the text size differently from other browsers. Mozilla and Opera can scale text that has been set to pixel size, while IE under Windows cannot. P >

Affinity is not just about blind people and screen readers. There are many people who are not blind but have visual impairment-you and I will be one of them when we get old. One of the easiest ways to make a site more approachable is to allow users to change the size of the text; refusing to provide such a choice deprives users of their initiative and is likely to make it impossible for users to read comfortably. P >

If designers specify the text size in pixels, most users will not be able to scale the text because InternetExplorer changes the text size differently from other browsers. Mozilla and Opera can scale text that has been set to pixel size, while IE under Windows cannot. P > div >

Affinity is not just about blind people and screen readers. There are many people who are not blind but have visual impairment-you and I will be one of them when we get old. One of the easiest ways to make a site more approachable is to allow users to change the size of the text; refusing to provide such a choice deprives users of their initiative and is likely to make it impossible for users to read comfortably. P > div > div > make: Yzci.Comh6 > div > body > html >

[you can modify part of the code before running to view the effect]

4. Use a combination of negative outer boundaries and internal patches

You don't need to know the height of which column in advance.

There are more hacks (mainly opera), but it is easy to use. It is recommended:

SourceCodetoRun

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Equalheight (highly adaptive solution in DIV+CSS layout) title > body {padding:0; margin:0; font-size:12px; font-family:Arial,Helvetica,sans-serif; line-height:140%; text-align:center; background:#E7DFD3;} # wrap {width:750px; margin:0auto; overflow:hidden;} # header {background:#E8E8E8 } # sideleft {width:580px; float:left; background:#FFF; text-align:left;} # sideright {width:170px; float:left; background:#F0F0F0; text-align:left;} / * easyclearing*/ # wrap:after {content:' [DONOTLEAVEITISNOTREAL]'; display:block; height:0; clear:both; visibility:hidden;} # wrap {display:inline-block } / *\ * / # wrap {display:block;} / * endeasyclearing*/ / *\ * / # sideleft,#sideright {paddinglybottomizo 32767pximportant; Margaret Mae bottomlue 32767pximportant;} @ mediaalland (min-width:0px) {# sideleft,#sideright {paddingfurosemide important; Margaret sideleft:before,#sideright:before {content:' [DONOTLEAVEITISNOTREAL]'; display:block; background:inherit Height:0;} / * * / # footer {background:#E8E8E8; width:100%; float:left;} H2 footer h3 {font-size:20px;} style > head > Headh2 > div > sidelefth3 >

It is not easy to move from a fixed, pixel-based design method to a flexible, relative design method. But if used properly, it can be a natural choice to enhance affinity and ease of use without having to make design sacrifices. P >

Pixels are non-scalable dots on a computer screen, and an h4 is a word-size square. Due to the change in font size, H4 represents the relative unit of the text size that the user likes. P >

It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design method, you can make full use of computer monitors and browsers. P >

You may want your site to be displayed in a certain way, but your users may want to see it differently. Anything imposed on users is not conducive to ease of use, thus harming the success of the site. P >

It is not easy to move from a fixed, pixel-based design method to a flexible, relative design method. But if used properly, it can be a natural choice to enhance affinity and ease of use without having to make design sacrifices. P >

Pixels are non-scalable dots on a computer screen, and an h4 is a word-size square. Due to the change in font size, H4 represents the relative unit of the text size that the user likes. P >

It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design method, you can make full use of computer monitors and browsers. P >

You may want your site to be displayed in a certain way, but your users may want to see it differently. Anything imposed on users is not conducive to ease of use, thus harming the success of the site. P > div > siderighth3 >

It is not easy to move from a fixed, pixel-based design method to a flexible, relative design method. But if used properly, it can be a natural choice to enhance affinity and ease of use without having to make design sacrifices. P >

Pixels are non-scalable dots on a computer screen, and an h4 is a word-size square. Due to the change in font size, H4 represents the relative unit of the text size that the user likes. P >

It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design method, you can make full use of computer monitors and browsers. P >

You may want your site to be displayed in a certain way, but your users may want to see it differently. Anything imposed on users is not conducive to ease of use, thus harming the success of the site. P > div > Footer address >

Production: Yzci.Comp > div > div > body > html >

[you can modify part of the code before running to view the effect]

5. Use negative left and right boundaries and relative positioning

The following example can better solve the problem of the same column height.

Three-row and two-column layout, the main content is on the left, the page width 750px, the left column 580px, the right column 170px.

CSS Code:

ExampleSourceCode

# middle {width:580px; float:left; background:#FFFFFF; text-align:left;} # sideleft {width:580px; float:left; position:relative; margin-left:-580px;} # sideright {width:170px; float:right; position:relative; margin:0-170px00; background:#F0F0F0;} xhtml Code: ExampleSourceCode div > div > div >

From a structural point of view, middle (using the desired background color in the left column) is on the outermost, with a width equal to the width of sideleft, and the inner layer is sideright, whose width is 170px, and the floating direction is on the right. But the boundary on the right side is a negative 170px, which is equivalent to pulling the sideright to the right (the right side is next to the right side of the middle) 170px. On the other hand, sideleft is embedded in sideright, and its content comes out before sideright. The left boundary is minus 580, which is equivalent to 580px on the left of sideright, when sideleft and middle coincide.

Advantages of ◆: no background picture, no hacks, completely adaptive height.

◆ disadvantage: now the code can only be aligned to the left.

These are the five commonly used Div highly adaptive methods, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.