DIV CSS 佈局教程網

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

2.采用腳本控制列的高度（一）

需要事先知道哪列的高度，以此為基准用腳本控制。
document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"
上面的代碼是以sideright的基准高度來控制sideleft的高度。

代碼簡單，但比較被動：
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"
  7. content="text/Html;charset=utf-8"/> 
  8. <title>Equalheight(使用JS實現列高度相同的方法)title> 
  9. <styletypestyletype="text/CSS"> 
  10. body{  
  11. padding:0;  
  12. margin:0;  
  13. font-size:12px;  
  14. font-family:Arial,Helvetica,sans-serif;  
  15. line-height:140%;  
  16. text-align:center;  
  17. background:#E7DFD3;  
  18. }  
  19. #wrap{  
  20. width:750px;  
  21. margin:0auto;  
  22. /*overflow:hidden;*/  
  23. }  
  24. #header{  
  25. background:#E8E8E8;  
  26. }  
  27. #sideleft{  
  28. width:580px;  
  29. float:left;  
  30. background:#FFF;  
  31. text-align:left;  
  32. }  
  33. #sideright{  
  34. width:170px;  
  35. float:left;  
  36. background:#F0F0F0;  
  37. text-align:left;  
  38. }  
  39. #footer{  
  40. background:#E8E8E8;  
  41. width:100%;  
  42. float:left;  
  43. }  
  44. h1,h2,address,p{  
  45. margin:0;  
  46. padding:.8em;  
  47. }  
  48. h1,h2{font-size:20px;}  
  49. style> 
  50. head> 
  51. <body> 
  52. <dividdivid="wrap"> 
  53. <dividdivid="header"> 
  54. <h1>Headh1> 
  55. div> 
  56. <dividdivid="sideleft"> 
  57. <h2>sidelefth2> 
  58. <p>要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用，
  59. 就可以成為增強親和力和易用性的一個自然選擇，同時又無須做出設計上的犧牲。p> 
  60. <p>像素是計算機屏幕上的不可縮放的點，而一個  
  61. h3就是一個字大小的方塊。由於字體大小的變化，h3  
  62. 代表用戶喜歡的文字大小的相對單位。p> 
  63. <p>采用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，則考慮的東西就相對較少。
  64. 可是如果采用彈性的設計方法，就可以充分利用電腦的顯示器和浏覽器。p> 
  65. <p>也許你想你的網站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。
  66. 任何強加於用戶的東西都不利於易用性，從而對網站的成功造成損害。p> 
  67. <p>要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用，
  68. 就可以成為增強親和力和易用性的一個自然選擇，同時又無須做出設計上的犧牲。p> 
  69. <p>像素是計算機屏幕上的不可縮放的點，而一個  
  70. h3就是一個字大小的方塊。由於字體大小的變化，h3  
  71. 代表用戶喜歡的文字大小的相對單位。p> 
  72. <p>采用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，則考慮的東西就相對較少。
  73. 可是如果采用彈性的設計方法，就可以充分利用電腦的顯示器和浏覽器。p> 
  74. <p>也許你想你的網站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。
  75. 任何強加於用戶的東西都不利於易用性，從而對網站的成功造成損害。p> 
  76. div> 
  77. <dividdivid="sideright"> 
  78. <h2>siderighth2> 
  79. <p>要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用，
  80. 就可以成為增強親和力和易用性的一個自然選擇，同時又無須做出設計上的犧牲。p> 
  81. <p>像素是計算機屏幕上的不可縮放的點，而一個  
  82. h3就是一個字大小的方塊。由於字體大小的變化，h3  
  83. 代表用戶喜歡的文字大小的相對單位。p> 
  84. <p>采用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，則考慮的東西就相對較少。
  85. 可是如果采用彈性的設計方法，就可以充分利用電腦的顯示器和浏覽器。p> 
  86. <p>也許你想你的網站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。
  87. 任何強加於用戶的東西都不利於易用性，從而對網站的成功造成損害。p> 
  88. div> 
  89. <scripttypescripttype="text/Javascript"> 
  90. document.getElementById("sideleft").style.height
  91. =document.getElementById("sideright").scrollHeight+"px"  
  92. script> 
  93. <dividdivid="footer"> 
  94. Footer  
  95. address> 
  96. <p>制作：Yzci.Comp> 
  97. div> 
  98. div> 
  99. body> 
  100. Html> 
  101.

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

CSS詳解
Padding屬性用法簡介
你對Padding屬性的用法是否了解，這裡向大家簡單描述一下，這個簡寫屬性設置元素所有內邊距的寬度
深入理解DIV+CSS絕對定位和相對定位
在用DIV+CSS控制排版過程中，定位一直被人認為是一個難點，這主要是表現為很多網友在沒有深入理解
CSS技巧：3種常用方法解決div列高度自適應(2)
2、腳本控制高度 .. 在中加入如下代碼（假設divright的高度相對最高）：<scrip

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
從A頁面連接到B頁面後並直接把B頁面的隱藏層顯示 DIV底部放置文字 對付CSS兼容問題的十個超級技巧 3D按鈕式導航條 HTML特效代碼 CSS教程:元素詳解 DIV高度自適應方法匯總 ie6普及的大環境下暫時不要考慮w3c標准 web前端開發需要注重網頁性能，降低項目開發成本與提高效率 一個針對IE7的CSS Hack
熱門推薦
探究IE7beta2的CSS兼容性 CSS Hack兼容大全,令您的網頁能正常顯示在IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari…[圖] 用DIV+CSS切割多背景合並圖片 CSS Sprites 技術 CSS兼容的技巧 網站性能優化整理 探究CSS caption-side屬性使用 做個好重構不容易 怎樣才算一個好重構？... IE6中背景屬性加a與a:hover問題 CSS中的定位（position）
大家都在看
js 模仿錨點定位的實現方法 js操作時間（年-月-日 時-分-秒 星期幾） 固定寬高的DIV如何絕對居中 CSS語法手冊（三）文本填充，邊框，邊界和位置屬性（一） JS仿iGoogle自定義首頁模塊拖拽特效的方法教程 JavaScript+CSS控制打印格式示例介紹 css3學習心得分享 jquery實現一個簡單的表單驗證實例
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved