層自動適應高度

2020-10-23 18:48:10

字體：大中小

來源：轉載

供稿：網友

<!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></title><style type="text/css"> body { font:12px Tahoma;margin:0px;text-align:center; } a:link,a:visited {font-size:12px;text-decoration:none;} a:hover{} /*頁面層容器*/ #container { width:780px;margin:0px auto;background:#fff } /*頁面頭部*/ #header {background:url(logo.gif) no-repeat;} #banner {     background:url(banner.jpg) 0px no-repeat; /*加入背景圖片*/;background:#999;     width:780px; /*設定層的寬度*/     margin:auto; /*層居中*/     height:200px; /*設定高度*/     border-bottom:5px solid #EFEFEF; /*畫一條淺灰色實線*/     clear:both /*清除浮動*/ } #pagebody {     width:780px; /*設定寬度*/     margin:0px auto; /*居中*/     background:#000 } #sidebar {     width:200px; /*設定寬度*/     text-align:left; /*文字左對齊*/     float:left; /*浮動居左*/     background:#f3c;color:#666     overflow:hidden; /*超出寬度部分隱藏*/         height:300px;     padding:0px } #mainbody {     width:580px;     text-align:left;      margin:0px auto; /*居中*/        float:right;         overflow:hidden;      color:#fff } /*頁面底部*/ #footer{ width:780px;margin:0 auto;height:65px;background:#999;repeat-x;color:#ff0066;clear:both; } </style></head><body>       <div   class="iwvjtn8m0"   id=container></div> <div   class="iwvjtn8m0"   id=header> <div   class="iwvjtn8m0"   id=banner></div></div> <div   class="iwvjtn8m0"   id=pagebody> <div   class="iwvjtn8m0"   id=sidebar><h2>這一層需要與右邊的層同步,也需要自適應高度</h2></div> <div   class="iwvjtn8m0"   id=mainbody><h2>想使這一層自動適應高度,有辦法嗎?</h2></div> <div style="clear:both;height:1px;margin-bottom:-1px;padding:0; background:#FF0000"></div> </div> <div   class="iwvjtn8m0"   id=footer>這一層不變</div></div></body></html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執行]

上一篇：讓2個DIV居中并排顯示

下一篇：滾動條效果