1. 并列的两个盒子，一个有固定宽度，让另一个占满（自适应）剩余 **宽度**
方法1: flex布局
flex布局没有浮动,让页面布局更为稳定。
<style>
#d1{
width:100%;
display:flex; /*flex布局*/
}
.dz{
background: red;
width:200px;
height: 200px;
}
.dx{
flex:1; /*flex:1*/
height: 200px;
background: yellow;
}
</style>
<div id="d1">
<div class="dz"></div>
<div class="dx"></div>
</div>方法2: 外边距法
<style>
.wrap{
width:1000px;
height:400px;
border:1px solid red;
}
.left{
float:left; /* 固定宽度的元素一定要浮动 */
width:200px;
height:100%;
background:gray;
border:1px solid red;
}
.right{
border:1px solid blue;
background:green;
height:100%;
width:auto; /* 宽度自适应 */
margin-left:200px; /* 非固定宽度的元素,使用外边距将固定宽度的元素推开*/
}
</style>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>方法3. CSS计算函数
<style>
.wrap{
width:1000px;
height:400px;
border:1px solid red;
}
.left{
width:200px;
height:100%;
background:gray;
float:left; /* 固定高度的盒子浮动 */
}
.right{
height:100%;
background:green;
float:right; /* 固定高度的盒子也浮动,但是使用C3的计算函数 */
width:calc(100%-200px); /*计算函数 calc()*/
}
</style>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>2. 左边的导航栏 **高度 **自适应右边内容。
页面左侧有导航栏，右侧是内容。由于右侧内容不确定，所以右侧盒子的高度是根据内容的多少自动变化的，而希望左侧导航栏的高度可以根据右侧盒子的高度变化而变化。当然，如果是希望右边盒子高度自适应于左边也可以的。
HTML代码:
<div class="all">
<div class="left"></div>
<div class="right"></div>
</div>注: 2个子盒子一定要有父盒子包裹。
CSS样式:
- 先写出基本样式代码:
.left{
width: 200px;
height: 200px;
float: left;
background-color: #678232;
}
.right{
width: 500px;
height: 700px;
float: left;
background-color: #23ef67;
}- 接下来实现样式:
基本思路:
给两边盒子一个非常大的margin值，然后再给一个和margin值相等的负的padding值(这个负的padding值是为了填充margin的)，而由于我们给的margin值很大，为了避免滚动条滚到天荒地老，我们再给父盒子加一个overflow:hidden，两个子盒子也分别加一个overflow:hidden，就成功了
.all{
overflow: hidden;
}
.left{
width: 200px;
height: 200px;
float: left;
background-color: #678232;
overflow: hidden;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
.right{
width: 500px;
height: 700px;
float: left;
background-color: #23ef67;
overflow: hidden;
margin-bottom: -10000px;
padding-bottom: 10000px;
}拓展: css实现多列高度不同的div**等高**。
思路: 利用padding-bottom | margin-bottom正负值相抵；设置父容器设置超出隐藏（overflow:hidden），这样父容器的高度就还是 它里面的列没有设定padding-bottom时的 高度。当它里面的任 一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
#wrap {
overflow: hidden; /* 父盒子移除隐藏 */
width: 670px;
margin: 10px auto;
padding-bottom: 10px;
position: relative;
}
.box {
float: left; /* 子盒子浮动 */
display: inline;
margin-top: 10px;
width: 190px;
background: #c8c8c8;
margin-left: 10px;
padding: 10px;
padding-bottom: 820px; /* */
margin-bottom: -800px; /* */
}
</style>
<div id="wrap">
<div class="box">
<h1>CSS实现三列DIV等高布局</h1>
<p>第一列的内容</p>
</div>
<div class="box">
<h1>CSS实现三列DIV等高</h1>
<p></p>
</div>
<div class="box">
<h1></h1>
<p>第3列的内容,假设每列内容高度不等</p>
</div>
</div>3. 总结左右div高度等高的实现方法
方法1 : 利用背景图，做出左右等高的模拟效果
此方法不是真正的左右等高，而是在外框元素中添加一张背景图片，当内容增多时，背景会纵向重复，就会形成左右等高的效果。
这种方法不是真正的div自动等高，而是在左右两个div的外面添加一个外框元素，给这个外框元素添加一个背景，当内容增多时，背景就会向下纵向重复，看起来就向左右两个div都自动向下延伸了一样。
<div id ="wrap">
<div class="left">
<div class="right">
<div class="clear">
</div>
<style>
*{
margin:0;
padding:0;
}
#wrap{
width:950px;
height:100%;
clear:both;
margin:0 auto;
background:#FFF url(background.gif) repeat; /* 父元素背景图平铺 */
}
.left{
float:left;
width:190px;
}
.right{
float:right;
width:750px;
}
.clear { clear:both; }
</style>- 给wrap定义背景的时候要注意，这里定义的总宽度是950像素，左侧边栏是190像素，右侧是750像素，两者中间有10像素的空白，制作背景图时应按照此尺寸制作，左侧190像素是一个颜色，右侧750像素是一个颜色，中间10像素白色。
- 由于这个布局采用的是float浮动布局的方式，两个div分别向左向右分布，很容易让浏览器解析时出现问题而检测不到高度，所以在CSS代码中，wrap的高度应定义为100%，并且使用clear方法清除浮动，让其在Firefox中也正常显示。
方法2: 利用表格嵌套
此方法就是在div中嵌套一个表格。因为表格是可以左右自动等高的，所以当一侧的内容增多时，两侧都会自动等高。
其实只要用表格布局做过页面，这个方法基本上大家都会，就是在div中嵌套表格。
原则上，使用div布局应尽量减少表格出现，但为了达到某些效果，稍稍的使用一些也是可以的，况且国外有些较有名的网站也使用了这种方法。
<div id="wrap">
<table border="0" cellpadding="0" cellspacing="0" id="table_layout">
<tr>
<td id="left_b"> <!-- 第1列 -->
<div class="box">
<p></p><p> </p>
<p></p><p> </p>
</div>
<div class="box">
<p></p><p> </p>
<p><br/><br/><br/><br/></p>
</div>
</td>
<td id="mid_b"> </td> <!-- 第2列 -->
<td id="right_b">
<div class="box"><br/><br/><br/></div> <!-- 第3列 -->
</td>
</tr>
</table>
</div>
* { margin:0; padding:0; }
#wrap {
width:950px;
height:100%;
clear:both;
margin:0 auto;
background:#FFF;
color:#FFF;
}
#table_layout { width:950px; }
#left_b { width:190px; background:#09C; }
#right_b { width:750px; background:#09C; }
#mid_b { width:10px; }
.box { clear:both; height:100%; }方法3: 利用内、外补丁padding和margin自动等高
思路: 利用正内补丁和负外补丁相结合，再隐藏掉溢出的内容，最终达到左右等高的效果。
<div id="wrap"> <!--父盒子-->
<div id="left"> <!--左侧盒子-->
<br /><br />
</div>
<div id="right"> <!--右侧盒子-->
<br/><br />
<br /> <br /> <br />
<br /> <br />
</div>
</div>
* { margin:0; padding:0; }
#wrap{
overflow:hidden;
padding:0;
padding-left:180px;
}
#left,#right{
height:auto;
margin-bottom:-10000px;
padding-bottom:10000px;
}
#left{
display:inline;
float:left;
width:180px;
margin-left:-180px;
background: #0CF;
}
#right{
float:right;
width:100%;
background: #FC6;
}1、最外面的wrap必须使用overflow:hidden来隐藏溢出的内容。
2、wrap的左内补丁设置为180像素是为了让left这个div有空间显示。
3、left和right两个div底部外补丁为-10000px，底部内补丁为10000px，这是必须设置的。如果内容可能会较多，可以将数值再增大。
4、left这个div居左，right居右，display:inline属性是为了修正left在IE6中会跑出外框的bug。
方法4: JS脚本实现
JS是最好的Html辅助程序，尤其是前端界面的开发，在自动等高方面，也有专业的脚本。
网上使div等高的Javascript脚本很多，但有些仅仅针对IE浏览器可用，对Firefox、Opera等浏览器无效，所以在选择脚本的时候应该特别注意脚本的跨浏览器兼容性。
<div class="div_top">
这是顶部的div
</div>
<div id="Div1" class="div_left">
左部div <br />
<br/><br /><br />
<br /><br />
<br /><br />
</div>
<div id="Div2" class="div_right">
右部div <br/> <br/> <br/>
</div>
<div class="div_bottom">
这是底部div<br/>
</div>
* { margin:0px; padding:0px; }
.div_top{ width:100%; background:#FCC; }
.div_bottom{ width:100%; background:#FFC; }
.div_left{ position:absolute; width:200px; background:#FE2; }
.div_right{ margin-left:200px; background:#0CF; }
JS代码如下:
function P7_colH(){
var i,oh,hh,h=0, dA=document.p7eqc,an=document.p7eqa;
if(dA&&dA.length){
for(i=0;i<dA.length;i++){
dA[i].style.height='auto';
}
for(i=0;i<dA.length;i++){
oh=dA[i].offsetHeight;h=(oh>h)?oh:h;
}
for(i=0;i<dA.length;i++){
if(an){
dA[i].style.height=h+'px';
}
else{
P7_eqA(dA[i].id,dA[i].offsetHeight,h);
}
}
if(an){
for(i=0;i<dA.length;i++){
hh=dA[i].offsetHeight;
if(hh>h){
dA[i].style.height=(h-(hh-h))+'px';
}
}
}else{
document.p7eqa=1;
}
document.p7eqth=document.body.offsetHeight;
document.p7eqtw=document.body.offsetWidth;
}
}
function P7_eqT(){
if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){
P7_colH();
}
}
function P7_equalCols(){
if(document.getElementById){
document.p7eqc=new Array;
for(i=0;i<arguments.length;i++){
document.p7eqc[i]=document.getElementById(arguments[i]);
}
setInterval("P7_eqT()",10);
}
}
function P7_eqA(el,h,ht){
var sp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);
ch=(ch)?ch:h;
var ad=oh-ch,adT=ht-ad;
nh+=inc;
nh=(nh>adT)?adT:nh;
g.style.height=nh+'px';
oh=g.offsetHeight;
if(oh>ht){
nh=(ht-(oh-ht));g.style.height=nh+'px';
}
if(nh<adT){
setTimeout("P7_eqA('"+el+"',"+nh+","+ht+")",sp);
}
}
以上Html、CSS、Javascript三部分代码齐备后，还需在网页的<body>标签上加入一行代码onload="P7_equalCols('Div1','Div2')"，变成<body onload="P7_equalCols('Div1','Div2')">。其中Div1对应的是左侧div的id，Div2对应的是右侧的id
如果是三列布局，可以再自己增加内容，变成 <body onload="P7_equalCols('Div1','Div2','Div3')">
将以上代码复制到网页文件中，即可实现div自动等高的效果了。