DIV CSS 佈局教程網

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

你對Div高度自適應的方法是否了解，這裡和大家分享一下5種常用Div高度自適應的方法，希望對你的學習有所幫助。

5種常用Div高度自適應的方法

1.背景圖填充

這是使用最廣泛的一種做法，無hacks，推薦使用：

SourceCodetoRun

  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xHtml1-strict.dtd"> 
  4. <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/Html;charset=utf-8"/> 
  7. <title>Equalheight(列高度相同的方法)title> 
  8. <styletypestyletype="text/CSS"> 
  9. body{  
  10. padding:0;  
  11. margin:0;  
  12. font-size:12px;  
  13. font-family:Arial,Helvetica,sans-serif;  
  14. line-height:140%;  
  15. background:#E7DFD3;  
  16. }  
  17. #middle{  
  18. width:580px;  
  19. float:left;  
  20. background:#FFFFFF;  
  21. text-align:left;  
  22. }  
  23. #header,#footer{  
  24. background:#E8E8E8;  
  25. width:750px;  
  26. text-align:center;  
  27. }  
  28. #sideleft{  
  29. width:580px;  
  30. float:left;  
  31. position:relative;  
  32. margin-left:-580px;  
  33. }  
  34. #sideright{  
  35. width:170px;  
  36. float:right;  
  37. position:relative;  
  38. margin:0-170px00;  
  39. background:#F0F0F0;  
  40. }  
  41. #footer{  
  42. clear:both;  
  43. }  
  44. h1,h2,address,p{  
  45. margin:0;  
  46. padding:.8em;  
  47. }  
  48. h1,h2{font-size:20px;}  
  49. style> 
  50. <scripttypescripttype="text/Javascript"> 
  51. //
  52.  
  53. functiontoggleContent(name,n){  
  54. vari,t='',el=document.getElementById(name);  
  55. if(!el.origCont)el.origCont=el.innerHtml;  
  56.  
  57. for(i=0;i 
  58. el.innerHtml=t;  
  59. }  
  60.  
  61. //]]> 
  62. script> 
  63. head> 
  64. <body> 
  65. <dividdivid="header"> 
  66. <h1>Headh1> 
  67. <dividdivid="middle"> 
  68. <dividdivid="sideright"> 
  69. <dividdivid="sideleft"> 
  70. <h2>sidelefth2> 
  71. <p>默認長度加長頁面p> 
  72. <p>要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。  
  73. 但是如果恰當利用，就可以成為增強親和力和易用性的一個自然選擇，  
  74. 同時又無須做出設計上的犧牲。p> 
  75. <p>像素是計算機屏幕上的不可縮放的點，而一個  
  76. h3就是一個字大小的方塊。由於字體大小的變化，h3  
  77. 代表用戶喜歡的文字大小的相對單位。p> 
  78. <p>采用印刷式的固定設計方案或許要容易些，  
  79. 因為如果尺寸不變，則考慮的東西就相對較少。可是如果采用彈性的設計方法，
  80. 就可以充分利用電腦的顯示器和浏覽器。p> 
  81. <p>也許你想你的網站以某種特定的方式顯示，  
  82. 但是你的用戶想看到的可能不一樣。任何強加於用戶的東西都不利於易用性，
  83. 從而對網站的成功造成損害。p> 
  84. <p>要從固定的、基於像素的設計方法轉到彈性的、  
  85. 相對的設計方法並不容易。但是如果恰當利用，  
  86. 就可以成為增強親和力和易用性的一個自然選擇，同時又無須做出設計上的犧牲。p> 
  87. div> 
  88. <h2>siderighth2> 
  89. <p>要從固定的、基於像素的設計方法轉到彈性的、  
  90. 相對的設計方法並不容易。但是如果恰當利用，  
  91. 就可以成為增強親和力和易用性的一個自然選擇，  
  92. 同時又無須做出設計上的犧牲。p> 
  93. <p>像素是計算機屏幕上的不可縮放的點，而一個  
  94. h3就是一個字大小的方塊。由於字體大小的變化，h3  
  95. 代表用戶喜歡的文字大小的相對單位。p> 
  96. <p>采用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，
  97. 則考慮的東西就相對較少。  
  98. 可是如果采用彈性的設計方法，就可以充分利用電腦的顯示器和浏覽器。p> 
  99. <p>也許你想你的網站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。  
  100. 任何強加於用戶的東西都不利於易用性，從而對網站的成功造成損害。p> 
  101. div>div> 
  102. <dividdivid="footer"> 
  103. Footer  
  104. address> 
  105. <p>制作：Yzci.Comp> 
  106. div> 
  107. body> 
  108. Html> 
  109.

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

CSS詳解
html td nowrap不換行屬性使用方法
nowrap是什麼意思？nowrap定義和用法nowrap 屬性規定表格單元格中的內容不換行。實例
深入分析網頁CSS隱藏文字和以圖換字技術
打開電腦，感覺沒有什麼事可做，就隨便拿起《CSS mastery》翻了下，剛好看倒圖像替換這塊，突
CSS中Position屬性用法及作用
在CSS布局中，Position發揮著非常重要的作用，很多容器的定位是用Position來完成，C

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
學習背景圖像屬性background DIV+CSS布局：三列布局 WEB標准的思想是什麼？ 背景background屬性應用 CSS+XHTML制作的簡單網頁下拉菜單 使用Buttons庫通過Sass和Compass庫實現自定義按鈕 CSS控制頁面樣式的4種方式和優先級問題 用CSS控制網頁總體風格 CSS中margin屬性用法淺析 純CSS搞的alt跟title效果
熱門推薦
CSS樣式和JavaScript腳本是否放置於外部文件的探討 非常流行的所謂的氣泡窗口 使用div+css編寫的簡潔漂亮的頂部導航代碼 DIV CSS中float用法探究(3) CSS毛玻璃效果如何實現 css 濾鏡效果主要對HTML標記設置濾鏡效果 CSS應用基礎教程(1)基本認識 布局關於分辨率與100%自適應問題 CSS也要語義化
大家都在看
Bootstrap table使用方法詳細介紹 css定位與定位應用詳解 HTML5裡的placeholder屬性使用實例和美化顯示效果的方法 JS返回iframe中frameBorder屬性值的方法 JavaScript框架編程第1/2頁 CSS學習教程:display屬性使用詳細講解 js獲取會話框prompt的返回值的方法 JavaScript數據結構與算法之棧詳解
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved