DIV+CSS網頁另類上下布局的執行個體代碼_經驗交流

來源:互聯網
上載者:User
先說說在嘗試的過程發現的幾個問題
1、盒模型問題
相信玩重構或者說是DIV+CSS的朋友應該都知道這個東西,廢話不多說,不知道而有興趣可以去網上搜尋一下。這裡我提到這個是因為這個布局是用百分比來控制的,所以當加對邊框加上1px的邊後,就不好減回來,我是捨棄了上邊的邊框樣式。

2、溢出問題
這個問題只要對overflow做hidden就可以了,防止內容過長而溢出。剛剛開始的時候可以對html跟body的overflow加一個hidden屬性。Blank 告訴我,IE預設是有捲軸的寬度(這個偶知道),而FF是沒有的(這個偶就不知道了)。

基本上也就這樣,代碼如下:
<!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>上下層測試</title> <style type="text/css"> <!-- *{ margin:0px; padding:0px; } html,body{ height:100%; } * html, * html body { overflow: hidden; /*隱藏IE的預設捲軸的寬度*/ } #bodyDiv{ width:100%; height:100%; } #topDiv{ height:88%; background:#ccc; border:1px solid #000; overflow:auto; /*溢出的時候顯示捲軸為 auto */ } #bottomDiv{ height:12%; background:#f4f4f4; border:1px solid #F00; margin-top:-4px; overflow:auto; } h3{ font-size:14px; font-weight:bold; } --> </style> </head> <body> <h3>上面的</h3> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br /><br><br><br><br> <h3>下面的</h3> </body> </html> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.