DIV CSS 佈局教程網

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

4.采用負的外邊界和內補丁相結合

不需要事先知道哪列的高度。

hacks比較多（主要是Opera的），但容易使用，推薦：

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(DIV+CSS布局中自適應高度的解決方法)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. text-align:center;  
  16. background:#E7DFD3;  
  17. }  
  18. #wrap{  
  19. width:750px;  
  20. margin:0auto;  
  21. overflow:hidden;  
  22. }  
  23. #header{  
  24. background:#E8E8E8;  
  25. }  
  26. #sideleft{  
  27. width:580px;  
  28. float:left;  
  29. background:#FFF;  
  30. text-align:left;  
  31. }  
  32. #sideright{  
  33. width:170px;  
  34. float:left;  
  35. background:#F0F0F0;  
  36. text-align:left;  
  37. }  
  38. /*easyclearing*/  
  39. #wrap:after  
  40. {  
  41. content:'[DONOTLEAVEITISNOTREAL]';  
  42. display:block;  
  43. height:0;  
  44. clear:both;  
  45. visibility:hidden;  
  46. }  
  47. #wrap  
  48. {  
  49. display:inline-block;  
  50. }  
  51. /*\*/  
  52. #wrap  
  53. {  
  54. display:block;  
  55. }  
  56. /*endeasyclearing*/  
  57. /*\*/  
  58. #sideleft,#sideright  
  59. {  
  60. padding-bottom:32767px!important;  
  61. margin-bottom:-32767px!important;  
  62. }  
  63. @mediaalland(min-width:0px){  
  64. #sideleft,#sideright  
  65. {  
  66. padding-bottom:0!important;  
  67. margin-bottom:0!important;  
  68. }  
  69. #sideleft:before,#sideright:before  
  70. {  
  71. content:'[DONOTLEAVEITISNOTREAL]';  
  72. display:block;  
  73. background:inherit;  
  74. padding-top:32767px!important;  
  75. margin-bottom:-32767px!important;  
  76. height:0;  
  77. }  
  78. }  
  79. /**/  
  80. #footer{  
  81. background:#E8E8E8;  
  82. width:100%;  
  83. float:left;  
  84. }  
  85. h1,h2,address,p{  
  86. margin:0;  
  87. padding:.8em;  
  88. }  
  89. h1,h2{font-size:20px;}  
  90. style> 
  91. head> 
  92. <body> 
  93. <dividdivid="wrap"> 
  94. <dividdivid="header"> 
  95. <h1>Headh1> 
  96. div> 
  97. <dividdivid="sideleft"> 
  98. <h2>sidelefth2> 
  99. <p>要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用，
  100. 就可以成為增強親和力和易用性的一個自然選擇，同時又無須做出設計上的犧牲。p> 
  101. <p>像素是計算機屏幕上的不可縮放的點，而一個  
  102. h3就是一個字大小的方塊。由於字體大小的變化，h3  
  103. 代表用戶喜歡的文字大小的相對單位。p> 
  104. <p>采用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，則考慮的東西就相對較少。
  105. 可是如果采用彈性的設計方法，就可以充分利用電腦的顯示器和浏覽器。p> 
  106. <p>也許你想你的網站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。
  107. 任何強加於用戶的東西都不利於易用性，從而對網站的成功造成損害。p> 
  108. <p>要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用，
  109. 就可以成為增強親和力和易用性的一個自然選擇，同時又無須做出設計上的犧牲。p> 
  110. <p>像素是計算機屏幕上的不可縮放的點，而一個  
  111. h3就是一個字大小的方塊。由於字體大小的變化，h3  
  112. 代表用戶喜歡的文字大小的相對單位。p> 
  113. <p>采用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，則考慮的東西就相對較少。
  114. 可是如果采用彈性的設計方法，就可以充分利用電腦的顯示器和浏覽器。p> 
  115. <p>也許你想你的網站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。
  116. 任何強加於用戶的東西都不利於易用性，從而對網站的成功造成損害。p> 
  117. div> 
  118. <dividdivid="sideright"> 
  119. <h2>siderighth2> 
  120. <p>要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用，
  121. 就可以成為增強親和力和易用性的一個自然選擇，同時又無須做出設計上的犧牲。p> 
  122. <p>像素是計算機屏幕上的不可縮放的點，而一個  
  123. h3就是一個字大小的方塊。由於字體大小的變化，h3  
  124. 代表用戶喜歡的文字大小的相對單位。p> 
  125. <p>采用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，則考慮的東西就相對較少。
  126. 可是如果采用彈性的設計方法，就可以充分利用電腦的顯示器和浏覽器。p> 
  127. <p>也許你想你的網站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。
  128. 任何強加於用戶的東西都不利於易用性，從而對網站的成功造成損害。p> 
  129. div> 
  130. <dividdivid="footer"> 
  131. Footer  
  132. address> 
  133. <p>制作：Yzci.Comp> 
  134. div> 
  135. div> 
  136. body> 
  137. Html> 
  138.

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

CSS詳解
CSS手冊--CSS結合JS的運用（針對事件動作）
利用
CSS實現Tab技巧
　　程序員們都知道一般Tab都是靠Javascript來實現的，Javascript的好處是功能強
CSS屬性選擇器的四種格式
屬性選擇器（Attribute Selectors），或許你不應該對屬性選擇器感到陌生，

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
CSS實例教程：網頁區塊中標題右側更多 CSS應用基礎教程(3)應用補充 影響CSS渲染速度的10條寫法與建議(4) table建站,XHTML建站和DIV建站的不同 HTML中CSS樣式關聯的4種方式 左下角漂浮圖像,能跟隨滾動條進行上下移動 圖片變形扭曲腳本 在線調試css3.0的工具:css3 please和css3 generator CSS背景漸變 Div漸變 CSS filter實例 實現CSS垂直居中的五大方法及優缺點(3)
熱門推薦
CSS“隱藏”元素的多種方法的對比 一張圖片實現圓角 用dl dt dd來制作列表 空格 在ie與在firefox下長度不一樣問題 CSS網頁布局避免濫用div元素 css的負邊距（margin負值）的絕招 CSS的偽元素:標簽div:before、div:after CSS實現有立體感的橫向按鈕式菜單效果代碼 css 立體效果:CSS立體按鈕效果
大家都在看
javascript獲取作用在元素上面的樣式屬性代碼 jQuery選擇器的工作原理和優化分析 html、css基礎注意點(前端必看篇) XML簡易教程之一 - asp.net Js表格萬條數據瞬間加載實現代碼 CSS垂直居中網頁布局實現的5種方法 利用HTML5實現使用按鈕控制背景音樂開關 JS高級筆記
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved