div左邊固定、右邊自適應 和 上邊固定、下邊自適應
阿新 • • 發佈：2019-01-24
在網頁設計中，我經常遇到div一邊固定、一邊自適應的需求，在學習了關於CSS的一些書籍和網上的一些案例後，總結了兩個例子，以便應對以後的不時之需。話不多說，直接看程式碼。
第一個，是div左邊變化，右邊固定的程式碼：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #header,#footer { width:100%; height:150px; background:#ff0; border:1px dashed #f00; } #container { width:100%; height:500px; border:1px dashed #0f0; background:#ffd; } #sidebar { width:300px; background:orange; border:2px dotted inherit; float:right; height:100%; } #extraContent { float:left; width:100%; margin-left:-304px; height:100%; } #content { margin-left:304px; background:#dec; height:100%; } </style> </head> <body> <div id="header"> 標題 </div> <div id="container"> <div id="extraContent"> <div id="content"> 內容 </div> </div> <div id="sidebar"> 側邊欄 </div> </div> <div id="footer"> 頁尾 </div> </body> </html>
效果如下：
第二個，是div上邊固定，下邊變寬的程式碼：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> html,body { margin:0; padding:0; width:100%; height:100%; } #main { padding: 0; margin: 0; width: 100%; height: 100%; background:#gray; } #right { width: auto; height: 100%; margin-left: 325px; padding: 0; background:#ffd; } #left { width: 320px; height: 100%; float: left; position:relative; padding-top:320px; box-sizing: border-box;/*為元素設定的寬度和高度決定了元素的邊框盒*/ } #left_top { width: 100%; height: 318px; background:#ff0; position:absolute; top:0; left:0; } #left_bottom { height:100%; overflow: scroll; background:#dec; } </style> </head> <body> <div id="main"> <div id="left"> <div id="left_top"> 定高 </div> <div id="left_bottom"> <pre> 變高1 變高2 變高3 變高4 變高5 變高6 變高7 變高8 變高9 變高10 變高11 變高12 變高13 變高50 變高 100 </pre> </div> </div> <div id="right"> 內容區域 </div> </div> </body> </html>
效果如下：
box-sizing: border-box;