div+css自动适应高度问题！

你们都是坏人 2011-08-24 11:38:47

代码如下，要求显示内容为 wewe
的地方，随着左边的高度自动调节！



<!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=GB2312">

 

  <title> New Document </title>

 <style>

 *{padding:0;margin:0;}

#wrap{width:750px;

      margin:0 auto;

	  overflow:hidden;

}

#sideleft{width:580px;

          background:yellow;

		  float:left;

		  margin-bottom:-20000px;

		  padding-bottom:20000px;

}

#sideright{width:170px;

           background:green;

		   float:left;	

}



#footer{width:750px;

       height:100px;

		background:blue;

		float:left;

}



 

 </style>

 

 

 </head><body>



  <div id="wrap">

        <div id="sideleft">

  <h1>sideleft</h1>

  要从固定的、基于像素的设计方法转到弹性的、<br>

  相对的设计方法并不容易。但是如果恰当利用，<br>

  就可以成为增强亲和力和易用性的一个自然选择，<br>

  同时又无须做出设计上的牺牲。<br>



    <h1>sideleft</h1>

  要从固定的、基于像素的设计方法转到弹性的、<br>

  相对的设计方法并不容易。但是如果恰当利用，<br>

  就可以成为增强亲和力和易用性的一个自然选择，<br>

  同时又无须做出设计上的牺牲。<br>

  <h1>sideleft</h1>

  要从固定的、基于像素的设计方法转到弹性的、<br>

  相对的设计方法并不容易。但是如果恰当利用，<br>

  就可以成为增强亲和力和易用性的一个自然选择，<br>

  同时又无须做出设计上的牺牲。<br>



  </div>



  <div id="sideright">

  <div style="width:170px;background:#cc6699;" ><h1>sideright</h1>

  <p>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，

  就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p></div>

  <div  style="width:170px;background:#e3f2f8;word-break:break-all;" >wewe </div> 

  <div style="width:170px;height:130px;background:#99ff33;"></div>

  </div>



  <div id="footer">

  <h1>footer</h1>

  <p>网页</p>

  </div>

  

  <div>





 </body></html>

...全文

127 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

路伊阑珊 2011-08-25

打赏
举报

你可以将左右两边都放在一个div里面然后左边的高度为自动增长右边的高度为100% 这个样应该就可以满足你的要求

MuBeiBei 2011-08-25

打赏
举报

<!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">

 

  <title> New Document </title>

 <style>

 *{padding:0;margin:0;}

#wrap{width:750px;

      margin:0 auto;

      overflow:hidden;

}

#sideleft{width:580px;

          background:yellow;

          float:left;

          margin-bottom:-20000px;

          padding-bottom:20000px;

}

#sideright{width:170px;

           background:green;

           float:left;    

}



#footer{width:750px;

       height:100px;

        background:blue;

        float:left;

}



 

 </style>

 

 

 </head><body>



  <div id="wrap">

        <div id="sideleft">

  <h1>sideleft</h1>

  要从固定的、基于像素的设计方法转到弹性的、<br>

  相对的设计方法并不容易。但是如果恰当利用，<br>

  就可以成为增强亲和力和易用性的一个自然选择，<br>

  同时又无须做出设计上的牺牲。<br>



    <h1>sideleft</h1>

  要从固定的、基于像素的设计方法转到弹性的、<br>

  相对的设计方法并不容易。但是如果恰当利用，<br>

  就可以成为增强亲和力和易用性的一个自然选择，<br>

  同时又无须做出设计上的牺牲。<br>

  <h1>sideleft</h1>

  要从固定的、基于像素的设计方法转到弹性的、<br>

  相对的设计方法并不容易。但是如果恰当利用，<br>

  就可以成为增强亲和力和易用性的一个自然选择，<br>

  同时又无须做出设计上的牺牲。<br>



  </div>



  <div id="sideright">

  <div style="width:170px;background:#cc6699;" ><h1>sideright</h1>

  <p>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，

  就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p></div>

  <div  style="width:170px;background:#e3f2f8;word-break:break-all;height:auto !important; min-height:50px; height:50px;" >wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 wewe1 </div> 

  <div style="width:170px;height:130px;background:#99ff33;"></div>

  </div>



  <div id="footer">

  <h1>footer</h1>

  <p>网页</p>

  </div>

  

  <div>





 </body></html>