CSS translation: Forestgan
This is a typical three-row two-column layout, each column height (not sure which column height) is the same, is the goal of each designer, according to the general practice, most of the use of background map fill, add JS script method to make the column of the same height, In this paper, we introduce a method to solve the problem that the column height is the same by combining the container overflow part hiding and the negative bottom boundary of the column and the positive inner patch.
First look at the code:
#wrap {
Overflow:hidden;
}
#sideleft, #sideright {
padding-bottom:32767px;
Margin-bottom: -32767px;
}
Implementation principle:
Block elements must be contained in a container.
Apply Overflow:hidden to the element in the container.
Apply Padding-bottom (a large enough value) to the block element of the column.
Apply Margin-bottom (a large enough value) to the block element of the column.
Padding-bottom the column to the same height, and the negative margin-bottom it back to the beginning of the bottom, while the overflow is hidden away.
compatible with each browser
IE Mac 5
Get the height correct, so filter out the code above.
/*\*/
#sideleft, #sideright {
padding-bottom:32767px;
Margin-bottom: -32767px;
}
/**/
Opera
1. opera7.0-7.2 can not properly clear the overflow part, so add:
* 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 *
/*\*/
2. OPERA8 processing Overflow:hidden has a bug, plus the following code:
/*\*/
#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;
PADDING-TOP:32767PX!important;
Margin-bottom: -32767px!important;
height:0;
}
}
/**/
Opera9 's B2 is correcting 8 bugs.
Test environment: IE5.01, IE5.5, IE6.0, Firefox1.5, Opera8.5, Netscape 7.2 passed.
Final effect:
<! doctypehtml Public "-//w3c//dtd XHTML 1.0 strict//en" "<ahref=" HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD " target= "_blank" >http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a> "><ptml xmlns=" <a href= " http://www.w3.org/1999/xhtml "target=" _blank ">http://www.w3.org/1999/xhtml</a>" ><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:cen Ter;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 notreal] '; display:block; background:inherit; Paddin G-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 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&Gt <p> It may be easier to adopt a printed, fixed design, because if the size is the same, there is less 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, 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= "<ahref=" target= "_blank" >http://www.forest53.com</a> ">forestgan</a></p></div></div> </body></ptml>
Original:Http://www.positioniseverything.net/articles/onetruelayout/equalheight
