DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 巧用CSS來控制div自適應浏覽器的高度
巧用CSS來控制div自適應浏覽器的高度
編輯:布局實例     

有些朋友在用css+div做站的時候,經常會碰到這樣一個問題,某個框架在不同的浏覽器下會變形或者位置錯亂,這該怎麼辦呢?其實方法很簡單,用以下代碼就可以解決了:

<html>
 <head>
 <style>
 #myTable{height:100%;border:solid 1px red;width:100%;}
 #top{margin-top:1px;height:100px;border:solid 1px green}
 #down{margin-top:1px;height:89%;border:solid 1px silver}
 #left{height:100%;border:solid 1px black;margin:1px;width:200px;float:left;}
 #right{border:solid 1px #0aa;margin:1px;height:100%;width:240px;overflow:scroll;
 }
 </style>
 </head>
 <body>
 <table id='myTable'>
 <tr><td>
 <div id='top'></div>
 <div id='down'>
 <div id='left'></div>
 <div id='right'>
 這裡是內容
 這裡是內容容這裡是內容
 這裡是內容
 這裡是內容
 這裡是內容
 這裡是內容
 這裡是內容這裡是內容
 這裡這裡是內容
 
 這裡是內容
 這裡是內容
 這裡是內容
 
 這裡是內容
 這裡是內容
 這裡是內容
 這裡是雙線空間是內容
 這裡這裡是內容
 
 這裡是內容
 這裡是內容
 這裡是內容
 
 這裡是內容
 這裡是內容這裡是內容
 
 這裡是內容
 
 這裡是內容
 這裡是內容這裡是內容
 這裡這裡是內容
 
 這裡是內容
 這裡是內容
 這裡是內容
 這裡是內容
 這裡是內容容這裡是內容
 這裡是內容
 這裡是內容這裡是內容
 這裡這裡是內容
 
 這裡是內容
 這裡是內容
 這裡是內容
 這裡是內容
 這裡是內容容這裡是內容
 </div>
 </div>
 </td>
 </tr></table>
 </body>
 </html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved