萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 巧用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>

copyright © 萬盛學電腦網 all rights reserved