DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 五大常用Div高度自適應的方法(3)
五大常用Div高度自適應的方法(3)
編輯：CSS詳解     

3.采用腳本控制列的高度（二）

不需要事先知道哪列的高度，腳本自動判斷。
代碼較復雜，有點延時：

SourceCodetoRun 

  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd"> 
  4. <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml"XML:lang="en"lang="en"> 
  5. <head> 
  6. <title>腳本控制三行三列自適應高度DIV布局title> 
  7. <scriptsrcscriptsrc="../js/eqCols.JS"type="text/Javascript">script> 
  8. <styletypestyletype="text/CSS"> 
  9. body{  
  10. font-size:75%;  
  11. font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;  
  12. line-height:100%;  
  13. margin:5px;  
  14. padding:0px;  
  15. }  
  16. #header,#mid,#footer{  
  17. width:760px;  
  18. margin:0pxauto;  
  19. padding:0px;  
  20. }  
  21. #header{  
  22. background:#F4F4F4;  
  23. height:60px;  
  24. margin-bottom:5px;  
  25. }  
  26. h3,h5{  
  27. padding-top:25px;  
  28. color:#708090;  
  29. text-align:center;  
  30. margin:0;  
  31. }  
  32. #fbox{  
  33. background:#F1F1F1;  
  34. width:195px;  
  35. float:left;  
  36. }  
  37. #mbox{  
  38. background:#DFF7FF;  
  39. margin:0px5px0px;  
  40. padding:0px;  
  41. float:left;  
  42. width:360px;  
  43. }  
  44. #sbox{  
  45. background:#FFEBCC;  
  46. width:195px;  
  47. float:right;  
  48. }  
  49. p{  
  50. margin:0px;  
  51. padding:10px;  
  52. text-indent:2em;  
  53. line-height:130%;  
  54. }  
  55. #footer{  
  56. background:#CDDBED;  
  57. border-top:solid5px#FFFFFF;  
  58. text-align:center;  
  59. height:60px;  
  60. clear:both;  
  61. }  
  62. style> 
  63. head> 
  64. <bodyonloadbodyonload="P7_equalCols('fbox','mbox','sbox')"> 
  65. <dividdivid="header"><h3>腳本控制三行三列自適應高度DIV布局h3>div> 
  66. <dividdivid="mid"> 
  67. <dividdivid="fbox"><p> 
  68. 親和力指的並不只是關於盲人和屏幕閱讀器。還有許多人雖然不是盲人，
  69. 但是有視力障礙-你我變老時就會成為他們的一員。  
  70. 使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；
  71. 拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。  
  72. p><p> 
  73. 親和力指的並不只是關於盲人和屏幕閱讀器。還有許多人雖然不是盲人，
  74. 但是有視力障礙-你我變老時就會成為他們的一員。  
  75. 使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；
  76. 拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。  
  77. p>div> 
  78. <dividdivid="mbox"><p> 
  79. 親和力指的並不只是關於盲人和屏幕閱讀器。還有許多人雖然不是盲人，
  80. 但是有視力障礙-你我變老時就會成為他們的一員。  
  81. 使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；
  82. 拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。  
  83. p> 
  84. <p> 
  85. 如果設計者使用像素為單位指定文字大小，大多數的用戶將無法縮放文字，
  86. 因為InternetExplorer改變文字大小的方式與別的浏覽器不同。  
  87. Mozilla和Opera可以縮放已經設定像素大小的文字，而Windows下的IE卻不能。  
  88. p> 
  89. <p> 
  90. 親和力指的並不只是關於盲人和屏幕閱讀器。還有許多人雖然不是盲人，
  91. 但是有視力障礙-你我變老時就會成為他們的一員。  
  92. 使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；
  93. 拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。  
  94. p> 
  95. <p> 
  96. 如果設計者使用像素為單位指定文字大小，大多數的用戶將無法縮放文字，
  97. 因為InternetExplorer改變文字大小的方式與別的浏覽器不同。Mozilla和Opera可以縮放
  98. 已經設定像素大小的文字，而Windows下的IE卻不能。  
  99. p> 
  100. div><dividdivid="sbox"><p> 
  101. 親和力指的並不只是關於盲人和屏幕閱讀器。還有許多人雖然不是盲人，
  102. 但是有視力障礙-你我變老時就會成為他們的一員。  
  103. 使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；
  104. 拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。  
  105. p>div> 
  106. div> 
  107. <dividdivid="footer"><h5>制作：Yzci.Comh5>div> 
  108. body> 
  109. Html> 
  110.

[可先修改部分代碼再運行查看效果]

CSS詳解
三角形向下方向垂直翻轉效果
本節主要介紹了三角形向下方向垂直翻轉效果的實現，感興趣的朋友可以參考下XML/Html Code復
CSS實現文本垂直居中的三種情況(1)
你對CSS中文本垂直居中問題是否了解，這裡和大家分享一下CSS實現一行或多行文本垂直居中的方法，主
離開一個頁面時，跳出收藏夾對話框
<!-- 把如下代碼加入<body>區域中 --> <sc

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
詳解CSS的優先權 彈性不錯呵呵 純CSS實現超簡單的二級下拉導航菜單代碼 PSD網站模板轉換為XHTML CSS頁面 CSS解決表格或圖片內容將頁面撐開的辦法 從三方面加速CSS樣式作用網頁速度 CSS border常見簡寫屬性 專門介紹滑動門 CSS icon圖標之純CSS實現帶動畫效果的天氣圖標 CSS討論：IE下中英文字體下劃線對齊問題
熱門推薦
所有浏覽器中都能正常顯示的字體 CSS文字縮略 文字超出變省略號 使用css實現圓角圖形繪制 CSS:相同元素不同結構重復定義的問題 CSS打造無圖片帶箭頭的DIV方框 在移動Web頁面中使用CSS固定頁腳 利用CSS，不通過replace替換標引HTML標記 當你指向某個鏈接時，網頁中的小球會自動跑過去 CSS clear屬性給float帶來哪些影響
大家都在看
html5的畫布canvas――畫出弧線、旋轉的圖形實例代碼+效果圖 按鈕與textarea框中的內容同時閃爍 右側彈出導航菜單完整代碼 jQuery源碼解讀之hasClass()方法分析 JavaScript中eval()函數用法詳解 解答何謂DIV+CSS 十天學會DIV+CSS(div+css教程) 實例講解使用SVG制作loading加載動畫的方法
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved