<! 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 "><pead><title></title><style type=" Text/css "> Body {font:12px tahoma;margin:0px;text-align:center; } a:link,a:visited {Font-size:12px;text-decoration:none} a:hover{}/* page layer Container//#container {width:780px;margin:0px auto;background: #fff}/* page head//#header {Background:url (l ogo.gif) No-repeat;} #banner {background:url (banner.jpg) 0px no-repeat; * Add background picture */;background: #999; width:780px; /* Set the width of the layer * * * MARGIN:AUTO; /* Layer Center * * HEIGHT:200PX; /* Set Height * * border-bottom:5px solid #EFEFEF; /* Draw a light gray solid line * * Clear:both * Clear Floating/} #pagebody {width:780px; * Set width */margin:0px auto; * Center/Backgro und: #000} #sidebar {width:200px/* Set width */text-align:left;/* Text Left-aligned * * * * * * Floating live Left/* Backgrou Nd: #f3c; color: #666 Overflow:hiddeN /* Beyond the width of the part of the hidden */height:300px; padding:0px} #mainbody {width:580px; Text-align:left; margin:0px Auto; /* Center * * FLOAT:RIGHT; Overflow:hidden; Color: #fff}/* Page bottom/#footer {width:780px;margin:0 auto;height:65px;background: #999; Repeat-x;color: #ff0066; clear:b Oth } </style></pead><body> <div id=container></div> <div id=header> <div id= banner></div></div> <div id=pagebody> <div id=sidebar><p> This layer needs to be synchronized with the right layer and also requires adaptive height </p></div> <div id=mainbody><p> Want to make this layer automatically adapt to height, is there a way?</p></div> <div >< /div> </div> <div id=footer> This layer is unchanged </div></div></body></ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
