当前位置：首页 → 问答吧 → div+css自动适应高度问题！

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

时间：2011-08-24

来源：互联网

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

HTML code


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

作者: xinhao_ 发布时间: 2011-08-24

用table吧

作者: LXQYYH 发布时间: 2011-08-24

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

热门阅读

热门下载