Five ways to resolve column height adaptation (column height is the same)

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

solving | adaptive

1. Background image fill
This is one of the most widely used practices, no hacks, recommended use:

<! 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" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>equal height (same column height method) </title><style type=" Text/css ">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 -170px 0 0; background: #F0F0F0;} #footer {Clear:both;} h1,h2,address,p{margin:0; padding:. 8em;} h1,h2{font-size:20px;} </style><script type= "Text/javascript" >//<! [Cdata[function togglecontent (name,n) {var i,t= ', el = Document.getelemeNtbyid (name); if (!el.origcont) El.origcont = el.innerhtml; for (i=0;i<n;i++) T + = El.origcont; el.innerhtml = t; }//]]></script></pead><body> <div id= "header" > <p>Head</p> <div id= "mid Dle "> <div id=" sideright "> <div id=" sideleft "> <p>sideleft</p> <p><a href=" Java Script:togglecontent (' Sideleft ', 1) "> Default length </a> <a href=" javascript:togglecontent (' Sideleft ', 2) ' > lengthened page </a></p> <p> It is not easy to move from a fixed, pixel based design approach to a flexible, relative design approach. But if used properly, it can be a natural selection that enhances affinity and ease of use without sacrificing design. </p> <p> pixels are not a scalable point on the computer screen, and a H3 is a box of word size. Because of the font size change, H3 represents the relative units of the text size that the user prefers. </p> <p> It may be easier to adopt a printed, fixed design, because if the size is the same, there are fewer things to consider. However, if you use the flexible design method, you can make full use of the computer's monitor and browser. </p> <p> Maybe you want your site to be displayed in a certain way, but your users may want to see something different. Any imposition on the user is not conducive to ease of use, thereby causing damage to the success of the site. </p> <p> It is not easy to move from a fixed, pixel based design approach to a flexible, relative design approach. But if used properly, it can be a natural selection that enhances affinity and ease of use without sacrificing design. </p> </div> <p>sideright</p> <p> It's not easy to move from a fixed, pixel based design approach to a flexible, relative design approach. But if used properly, it can be a natural selection that enhances affinity and ease of use without sacrificing design. </p> <p> pixels are not a scalable point on the computer screen, and a H3 is a box of word size. Because of the font size change, H3 represents the relative units of the text size that the user prefers. </p> <p> It may be easier to adopt a printed, fixed design, because if the size is the same, there are fewer things to consider. However, if you use the flexible design method, you can make full use of the computer's monitor and browser. </p> <p> Maybe you want your site to be displayed in a certain way, but your users may want to see something different. Any imposition on the user is not conducive to ease of use, thereby causing damage to the success of the site. </p> </div></div> <div id= "Footer" > <address> footer </address> <p& gt; production: <a href= "http://homepage.yesky.com" > website pottery </a></p> </div></body></ptml> <script language= "Javascript" > var now = new Date (); document.write (" <noscript> &Lt;img src= "http://counter.yesky.com/counter.shtml? Cid=54197&aid=-1&refer=noscriptcounter&cur=noscriptcounter "border= ' 0 ' width= ' 0 ' height= ' 0 '/> </ Noscript>

2. Use script to control the height of the column (i)
You need to know which column's height in advance, and use it as a benchmark for scripting control.

document.getElementById ("Sideleft"). Style.height=document.getelementbyid ("Sideright"). scrollHeight+ "px"
The above code controls the height of the sideleft with a sideright base height.

Code is simple, but relatively passive:

<! 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" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>equal height (using JS to achieve the same column height method) </title><style type=" Text/css ">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:0 auto;/*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;} h1,h2,address,p{margin:0; padding:. 8em;} h1,h2{font-size:20px;} </style></pead><body><div id= "wrap" > <div id= "header" > <p>Head</p> < /div> <div id= "Sideleft" &GT <p>sideleft</p> <p> It is not easy to move from a fixed, pixel based design approach to a flexible, relative design approach. But if used properly, it can be a natural selection that enhances affinity and ease of use without sacrificing design. </p> <p> pixels are not a scalable point on the computer screen, and a H3 is a box of word size. Because of the font size change, H3 represents the relative units of the text size that the user prefers. </p> <p> It may be easier to adopt a printed, fixed design, because if the size is the same, there are fewer things to consider. However, if you use the flexible design method, you can make full use of the computer's monitor and browser. </p> <p> Maybe you want your site to be displayed in a certain way, but your users may want to see something different. Any imposition on the user is not conducive to ease of use, thereby causing damage to the success of the site. </p> <p> It is not easy to move from a fixed, pixel based design approach to a flexible, relative design approach. But if used properly, it can be a natural selection that enhances affinity and ease of use without sacrificing design. </p> <p> pixels are not a scalable point on the computer screen, and a H3 is a box of word size. Because of the font size change, H3 represents the relative units of the text size that the user prefers. </p> <p> It may be easier to adopt a printed, fixed design, because if the size is the same, there are fewer things to consider. However, if you use the flexible design method, you can make full use of the computer's monitor and browser. </p> <p> Maybe you want your site to be displayed in a certain way, but your users may want to see something different. Any imposition on the user is not conducive to ease of use, thereby causing damage to the success of the site. </p> </div> <div id= "Sideright" > <p>sideright</p> <p> to move from a fixed, pixel based design approach to an elastic, phase The design method of the pair is not easy. But if used properly, it can be a natural selection that enhances affinity and ease of use without sacrificing design. </p> <p> Pixel is not a scalable point on the computer screen, and a H3 is a box of words size. Because of the font size change, H3 represents the relative units of the text size that the user prefers. </p> <p> It may be easier to adopt a printed, fixed design, because if the size is the same, there are fewer things to consider. However, if you use the flexible design method, you can make full use of the computer's monitor and browser. </p> <p> Maybe you want your site to be displayed in a certain way, but your users may want to see something different. Any imposition on the user is not conducive to ease of use, thereby causing damage to the success of the site. </p> </div> <script type= "Text/javascript" >document.getelementbyid ("Sideleft"). style.height= document.getElementById ("Sideright"). scrollheight+ "px" </script> <div id= "Footer" > <address> Foo ter </address> <p> production: <a href= "http://homepage.yesky.com" > Web page | </a></p> </div>&l T;/div></body></ptml><script language= "Javascript" > var now = new Date (); document.write (" <noscript> </ Noscript>

3. Use script to control the height of the column (ii)
You don't need to know which column's height in advance, and the script automatically determines.

The code is more complex and somewhat delayed:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "xml:lang=" en "lang=" en "><pead> <title> The script controls three rows of three columns of adaptive height div layout </title><script src=. /js/eqcols.js "type=" Text/javascript "></script> <style type=" Text/css ">  </style></pead><body ><div id= "header" ><p> script control three rows of three columns adaptive height div layout </p> </div><div id= "Mid" ><div id= "Fbox" ><p> affinity refers not only to the blind 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 grow old. One of the easiest ways to make a Web site more approachable is to allow users to change the size of the text; Refusing to offer such a choice deprives the user of dominance and is likely to render the user unable to read comfortably. </p><p> affinity refers not only to 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 grow old. One of the easiest ways to make a Web site more approachable is to allow users to change the size of the text; Refusing to offer such a choice deprives the user of dominance and is likely to render the user unable to read comfortably. </p></div><div id= "mbox" ><p> affinity refers not only to 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 grow old. One of the easiest ways to make a Web site more approachable is to allow users to change the size of the text; Refusing to offer such a choice deprives the user of dominance and is likely to render the user unable to read comfortably. </p><p> If the designer specifies the text size in pixels, most users will not be able to scale the text because Internet Explorer changes the size of the text differently than the other browsers. Mozilla and Opera can scale text that has been set to pixel size, but IE cannot. </p><p> affinity refers not only to 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 grow old. One of the easiest ways to make a Web site more approachable is to allow users to changeText size; Refusing to offer such a choice deprives the user of dominance and is likely to render the user unable to read comfortably. </p><p> If the designer specifies the text size in pixels, most users will not be able to scale the text because Internet Explorer changes the size of the text differently than the other browsers. Mozilla and Opera can scale text that has been set to pixel size, but IE cannot. </p></div><div id= "Sbox" ><p> affinity refers not only to 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 grow old. One of the easiest ways to make a Web site more approachable is to allow users to change the size of the text; Refusing to offer such a choice deprives the user of dominance and is likely to render the user unable to read comfortably. </p></div></div><div id= "Footer" ><p> demo only <a href= "http://homepage.yesky.com" > website tao </a></p></div></body></ptml> <script language= "Javascript" > var now = New Date (); document.write (" <noscript> </noscript>

4. The combination of negative outer boundary and internal patch
You don't need to know which column's height in advance.

Hacks more (mainly opera's), but easy to use, recommended:

<! 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" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>equal Height (solution for Adaptive Heights in Div+css layout) </title><style type=" Text/css "> body{padding:0; margin:0; font-size:12px; font-family:arial, Helvetica, Sans-serif; line-height:140%; text-align:ce Nter Background: #E7DFD3;} #wrap {width:750px; margin:0 auto; 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;} /* Easy clearing/#wrap: After {content: ' [does not LEAVE IT are not real] '; Display:block; height:0; Clear:both; Visibility:hidden; } #wrap {Display:inline-block;} /*\*/#wrap {display:block;} /* End Easy clearing *//*\*/#sideleft, #sideright {padding-bottom:32767PX!important; Margin-bottom: -32767px!important; } @media all and (min-width:0px) {#sideleft, #sideright {padding-bottom:0!important; margin-bottom:0!important; #sideleft: Before, #sideright: before {content: ' [does not LEAVE IT are not real] '; display:block; background:inherit; padd ING-TOP:32767PX!important; Margin-bottom: -32767px!important; height:0; }}/**/#footer {background: #E8E8E8; width:100%; float:left;} h1,h2,address,p{margin:0; padding:. 8em;} h1,h2{font-size:20px;} </style></pead><body><div id= "wrap" > <div id= "header" > <p>Head</p> < /div> <div id= "Sideleft" > <p>sideleft</p> <p> It is not easy to move from a fixed, pixel based design approach to an elastic, relative design approach. But if used properly, it can be a natural selection that enhances affinity and ease of use without sacrificing design. </p> <p> pixels are not a scalable point on the computer screen, and a H3 is a box of word size. Because of the font size change, H3 represents the relative units of the text size that the user prefers. </p> <p> It may be easier to adopt a printed, fixed design, because if the size is the same, there are fewer things to consider. However, if you use the flexible design method, you can make full use of the computer's monitor and browser. </p> <p> AlsoYou want your site to be displayed in a certain way, but your users may want to see something different. Any imposition on the user is not conducive to ease of use, thereby causing damage to the success of the site. </p> <p> It is not easy to move from a fixed, pixel based design approach to a flexible, relative design approach. But if used properly, it can be a natural selection that enhances affinity and ease of use without sacrificing design. </p> <p> pixels are not a scalable point on the computer screen, and a H3 is a box of word size. Because of the font size change, H3 represents the relative units of the text size that the user prefers. </p> <p> It may be easier to adopt a printed, fixed design, because if the size is the same, there are fewer things to consider. However, if you use the flexible design method, you can make full use of the computer's monitor and browser. </p> <p> Maybe you want your site to be displayed in a certain way, but your users may want to see something different. Any imposition on the user is not conducive to ease of use, thereby causing damage to the success of the site. </p> </div> <div id= "Sideright" > <p>sideright</p> <p> to move from a fixed, pixel based design approach to an elastic, The relative design method is not easy. But if used properly, it can be a natural selection that enhances affinity and ease of use without sacrificing design. </p> <p> pixels are not a scalable point on the computer screen, and a H3 is a box of word size. Because of the font size change, H3 represents the relative units of the text size that the user prefers. </p> <p> It may be easier to adopt a printed, fixed design, because if the size is the same, there are fewer things to consider. However, if you use the flexible design method, you can make full use of the computer's monitor and browser. </p> <p> Maybe you want your site to be displayed in a certain way, but your users may want to see something different. Any imposition on the user is not conducive to ease of use, thereby causing damage to the success of the site. </p> </div> <div id= "Footer" > <address> FOoter </address> <p> production: <a href= "http://homepage.yesky.com" > Web page-</a></p> </div> </div></body></ptml> <script language= "Javascript" > var now = new Date (); document.write (" <noscript> </ Noscript>

5. Using negative left and right edges and relative positioning
The following example is a good way to solve the problem of the same column height.

Three lines of two column layout, the main content on the left, Web page width of 750px, left column 580px, right column 170px.

CSS code:

The following is a reference fragment:
#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 -170px 0 0;
Background: #F0F0F0;
}
XHTML code:

The following is a reference fragment:
<div id= "Middle" >
<div id= "Sideright" >
<div id= "Sideleft" >
</div>
</div>
</div>

From the structure, middle (using the background color of the left column) is the outermost, width equal to the width of the sideleft, the first layer is sideright, its width is 170px, the floating direction is to the right. But the right side of the boundary is a negative 170px, the equivalent of pulling the sideright to the left (to the left of the middle) 170px position. And Sideleft is set in the Sideright inside, its content before sideright out, the left boundary is negative 580, equivalent to the sideright left 580px, at this time sideleft and middle position coincide.

Advantages: No background picture, no hacks, complete adaptive height.

Disadvantage: Now the code can only be left-aligned.

Demonstrate:

<! 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" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>equal Height (solution for Adaptive Heights in Div+css layout) </title><style type=" Text/css "> body{padding:0; margin:0; font-size:12px; font-family:arial, Helvetica, Sans-serif; line-height:140%; text-align:ce Nter Background: #E7DFD3;} #wrap {width:750px; margin:0 auto; 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;} /* Easy clearing/#wrap: After {content: ' [does not LEAVE IT are not real] '; Display:block; height:0; Clear:both; Visibility:hidden; } #wrap {Display:inline-block;} /*\*/#wrap {display:block;} /* End Easy clearing *//*\*/#sideleft, #sideright {padding-bottom:32767PX!important; Margin-bottom: -32767px!important; } @media all and (min-width:0px) {#sideleft, #sideright {padding-bottom:0!important; margin-bottom:0!important; #sideleft: Before, #sideright: before {content: ' [does not LEAVE IT are not real] '; display:block; background:inherit; padd ING-TOP:32767PX!important; Margin-bottom: -32767px!important; height:0; }}/**/#footer {background: #E8E8E8; width:100%; float:left;} h1,h2,address,p{margin:0; padding:. 8em;} h1,h2{font-size:20px;} </style></pead><body><div id= "wrap" > <div id= "header" > <p>Head</p> < /div> <div id= "Sideleft" > <p>sideleft</p> <p> It is not easy to move from a fixed, pixel based design approach to an elastic, relative design approach. But if used properly, it can be a natural selection that enhances affinity and ease of use without sacrificing design. </p> <p> pixels are not a scalable point on the computer screen, and a H3 is a box of word size. Because of the font size change, H3 represents the relative units of the text size that the user prefers. </p> <p> It may be easier to adopt a printed, fixed design, because if the size is the same, there are fewer things to consider. However, if you use the flexible design method, you can make full use of the computer's monitor and browser. </p> <p> AlsoYou want your site to be displayed in a certain way, but your users may want to see something different. Any imposition on the user is not conducive to ease of use, thereby causing damage to the success of the site. </p> <p> It is not easy to move from a fixed, pixel based design approach to a flexible, relative design approach. But if used properly, it can be a natural selection that enhances affinity and ease of use without sacrificing design. </p> <p> pixels are not a scalable point on the computer screen, and a H3 is a box of word size. Because of the font size change, H3 represents the relative units of the text size that the user prefers. </p> <p> It may be easier to adopt a printed, fixed design, because if the size is the same, there are fewer things to consider. However, if you use the flexible design method, you can make full use of the computer's monitor and browser. </p> <p> Maybe you want your site to be displayed in a certain way, but your users may want to see something different. Any imposition on the user is not conducive to ease of use, thereby causing damage to the success of the site. </p> </div> <div id= "Sideright" > <p>sideright</p> <p> to move from a fixed, pixel based design approach to an elastic, The relative design method is not easy. But if used properly, it can be a natural selection that enhances affinity and ease of use without sacrificing design. </p> <p> pixels are not a scalable point on the computer screen, and a H3 is a box of word size. Because of the font size change, H3 represents the relative units of the text size that the user prefers. </p> <p> It may be easier to adopt a printed, fixed design, because if the size is the same, there are fewer things to consider. However, if you use the flexible design method, you can make full use of the computer's monitor and browser. </p> <p> Maybe you want your site to be displayed in a certain way, but your users may want to see something different. Any imposition on the user is not conducive to ease of use, thereby causing damage to the success of the site. </p> </div> <div id= "Footer" > <address> FOoter </address> <p> production: <a href= "http://homepage.yesky.com" > Web page-</a></p> </div> </div></body></ptml> <script language= "Javascript" > var now = new Date (); document.write (" <noscript> </ Noscript>

References: http://www.pmob.co.uk/temp/2equalising-columns-separate-good-2.htm

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

Five ways to resolve column height adaptation (column height is the same)

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

Five ways to resolve column height adaptation (column height is the same)

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support