当前位置：首页 → 问答吧 → div+css底部对齐与自动调节高度问题

div+css底部对齐与自动调节高度问题

时间：2011-08-24

来源：互联网

代码如下，要求
随着 id='sideleft'的资料的增加
<div style="width:170px;position:absolute;bottom:4px;_bottom:216px;height:130px;background:#99ff33;"></div>
</div>总是在底部
而样式
<div style="width:170px;margin-bottom:-20000px;padding-bottom:20000px;background:#e3f2f8;" >wewe </div>
随着 id='sideleft'的资料的增加自动调节高度

复制内容到剪贴板

代码:

<!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;
          /*margin-bottom:-20000px;
          padding-bottom:20000px;*/
}
#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>
<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;margin-bottom:-20000px;padding-bottom:20000px;background:#e3f2f8;" >wewe </div>
  <div style="width:170px;position:absolute;bottom:4px;_bottom:216px;height:130px;background:#99ff33;"></div>
  </div>
  <div id="footer">
  <h1>footer</h1>
  <p>制作：网页陶吧</p>
  </div>

  <div>
</body></html>

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

怎么没人呢！

<!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; /*margin-bottom:-20000px; padding-bottom:20000px;*/ } #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> <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;margin-bottom:-20000px;padding-bottom:20000px;background:#e3f2f8;" >wewe </div> <div style="width:170px;position:absolute;bottom:4px;_bottom:216px;height:130px;background:#99ff33;"></div> </div> <div id="footer"> <h1>footer</h1> <p>制作：网页陶吧</p> </div> <div> </body></html>
提示：您可以先修改部分代码再运行

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

我看不懂，顶一下

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

这问题我也不知道，只能等别人了！！

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