两个div，高总都保持一样高（总结）

 

1

< html >
< head >
< title >  测试  </ title >
</ head >
< body >
< div  style ="width:100%; height:100%" >
< div  id ="content"  style ="width:49%;border:1px #CCCCCC solid; height:100%; float:left; margin-left:1px" >
文章 < br >< br >
< input  type ="button"  value ="click"  onclick ="window.content.insertAdjacentHTML('afterBegin','文章<br><br><br><br>')" >
</ div >
< div  style ="width:49%;border:1px #CCCCCC solid; height:100%; float:left; margin-left:1px" > 广告 </ div >
</ div >
</ body >
</ html >

2

 

< style  type ="text/css" > ...
#b,#c{...}{
    width:49%;border:1px solid #000;float:left;clear:right
}
</ style >
< div  id ="aa" >
    < div  id ="b" > 这个地方是放文章的，字可能有时多这个地方是放文章的，字可能有时多这个地方是放文章的，字可能有时多这个地方是放文章的，字可能有时多这个地方是放文章的，字可能有时多字可能有时多这个地方是放文章的，字可能有时多这个地方是放文章的，字可能有时多字可能有时多这个地方是放文章的，字可能有时多这个地方是放文章的，字可能有时多字可能有时多这个地方是放文章的，字可能有时多这个地方是放文章的，字可能有时多 </ div >
    < div  id ="c" > 广告之类的 </ div >
</ div >
< script  type ="text/javascript" > ...
window.onload=window.onresize=function ()...{
document.getElementById("c").style.height=document.getElementById("b").offsetHeight+"px";
}
</ script >

 

3

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > footerStick - Footer sticks to bottom of page </ title >
< style  type ="text/css"  title ="defaultStyle" > ...
/**//*<![CDATA[*/
<!--
* {...}{
  margin: 0;
  padding: 0;
}

html, body {...}{
  height: 100%; /**//* Required */
}

body {...}{
  color: #333;
  font: 11px Verdana, sans-serif;
  text-align: center;
}

h1 {...}{
  font: bold 12px Verdana, sans-serif;
}

h2 {...}{
  padding: 1em 0 .2em 0;
  font: normal 18px/1.5em Georgia, serif;
}

p {...}{
  margin: 2em 0;
  line-height: 1.5em;
}

a {...}{
  color: #666;
  font-weight: bold;
  text-decoration: none;
}

a:hover {...}{
  color: #999;
  text-decoration: underline overline;
}

#container-page {...}{
  margin: 0 auto;
  width: 600px;
  background: #DDD;
  text-align: left;
  position: relative;
  min-height: 100%; /**//* For Modern Browsers */
  height: auto !important; /**//* For Modern Browsers */
  height: 100%; /**//* For IE */
}

#container-head {...}{
  background: #999;
}

#head {...}{
  padding: 1em;
}

#container-content {...}{
  padding: 0 2em 40px 2em;
}

#container-content:after {...}{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

#content-pri {...}{
  width: 80%;
  float: right;
}

#content-sec {...}{
  padding: 1em 0;
  width: 20%;
  float: left;
}

#content-sec ul,#content-sec ul li {...}{
  list-style: none none;
}

#container-foot {...}{
  width: 100%;
  background: #CCC;
  position: absolute;
  bottom: 0 !important;
  bottom: -1px; /**//* For Certain IE widths */
  height: 40px;
}

#foot {...}{
  padding: 0 1em;
  line-height: 40px;
}
-->
/**//*]]>*/
</ style >
</ head >
< body >
< div  id ="container-page" >
   < div  id ="container-head" >
     < div  id ="head" >< h1 > Head </ h1 ></ div >
   </ div >
   < div  id ="container-content" >
     < div  id ="content-pri" >
       < h2 > Resize the window to see the footer move </ h2 >
       < p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In augue. Sed vitae urna feugiat ante faucibus scelerisque. Maecenas non risus vitae velit auctor tincidunt. Ut facilisis elit non metus. Quisque ac dolor. Morbi eget erat in eros rhoncus imperdiet. Aenean egestas lectus ac sapien. Pellentesque non metus ac justo luctus feugiat. Nam elit elit, sagittis vel, eleifend quis, imperdiet non, lorem. In hac habitasse platea dictumst. Suspendisse convallis, dui vitae auctor elementum, eros orci porta nisl, in ullamcorper leo wisi eget mi. Sed eget sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet diam at elit lacinia convallis. Nullam massa ligula, posuere sit amet, gravida a, placerat ac, justo. Cras vulputate. Aliquam sed enim non justo sollicitudin tempor. </ p >
       < p > Donec consequat cursus elit. Quisque posuere, massa blandit tincidunt aliquam, ipsum lectus egestas tortor, a iaculis ipsum urna et quam. Donec ultrices varius mi. Sed non magna. Sed ligula. Etiam magna quam, viverra at, fringilla nec, nonummy ut, wisi. Aenean volutpat, tellus at faucibus bibendum, sapien massa mattis lorem, id volutpat quam odio vitae mauris. Donec laoreet lacinia urna. Integer adipiscing dui nec dui. Curabitur non nulla. Vestibulum faucibus, quam ut iaculis volutpat, nibh risus tempus risus, quis lobortis nulla erat nec ipsum. Pellentesque ac est in libero semper hendrerit. Maecenas accumsan est quis diam varius laoreet. Ut velit risus, sollicitudin in, tempor ut, gravida non, sem. Quisque at quam vel orci volutpat luctus. </ p >
     </ div >
     < div  id ="content-sec" >
       < ul >
         < li >< a  href ="/" > Home </ a ></ li >
         < li >< a  href ="/" > Products </ a ></ li >
         < li >< a  href ="/" > Services </ a ></ li >
         < li >< a  href ="/" > Careers </ a ></ li >
         < li >< a  href ="/" > Conact </ a ></ li >
       </ ul >
     </ div >
   </ div >
   < div  id ="container-foot" >
     < div  id ="foot" > Foot </ div >
   </ div >
</ div >
</ body >
</ html >

 

4

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >  
< html  xmlns ="http://www.w3.org/1999/xhtml" >  
< head >  
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />  
< style  type ="text/css" > ...  
<!-- 
#wrap{...}{overflow:hidden;} 
#sidebar_left,#sidebar_right{...}{padding-bottom:100000px;margin-bottom:-100000px;} 
--> 
</ style ></ head >  

< body >  
< div  id ="wrap"  style ="width:300px; background:#FFFF00;" >  
< div  id ="sidebar_left"  style ="float:left;width:100px; background:#FF0000;" > Left </ div >  
< div  id ="sidebar_mid"  style ="float:left;width:100px; background:#666;" >  
Middle < br  />  
Middle < br  />  
Middle < br  />  
Middle < br  />  
Middle < br  />  
Middle < br  />  
Middle < br  />  
Middle < br  />  
Middle < br  />  

</ div >  
< div  id ="sidebar_right"  style ="float:right;width:100px; background:#0000FF;" > Right </ div >  
</ div >  
</ body >  
</ html >

 

5

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title >  测试  </ title >
</ head >
< script  language ="JScript" > ...
<!--
    function addCon(abc) ...{
        if ( abc == 2) ...{
            window.content.insertAdjacentHTML('afterBegin','文章<br>');
        } 
        var con_height = window.content.clientHeight;
        window.ad.style.height = con_height;
    }
-->
</ script >
< body  onload ="addCon(1)" >
< div  style ="width:100%; height:100%" >
< div  id ="content"  style ="width:49%;border:1px #CCCCCC solid; height:100%; float:left; margin-left:1px" >
文章 < br >
< input  type ="button"  value ="click"  onclick ="addCon(2)" >
</ div >
< div  id ="ad"  style ="width:49%;border:1px #CCCCCC solid; height:100%; float:left; margin-left:1px" > 广告 </ div >
</ div >
</ body >
</ html >