兩列布局，左邊自適應，右邊高度不定
阿新 • • 發佈：2018-06-27
不定 style pad 分享 rip css span 高度 AC
布局如下圖：
當content中內容小於頁面高度時，占滿整個頁面；
當content中內容大於液面高度時，以內容高度為準。
test.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="height.css"> 6 <title>Title</title> 7 </head> 8 <body>9 <div class="container"> 10 <div class="sidebar">sidebar</div> 11 <div class="content-right"> 12 <div class="header">header</div> 13 <div class="content"> 14 content 15 </div> 16 <div class="footer">footer</div> 17 </div> 18 </div> 19 </body> 20 <script src="height.js"></script> 21 </html>
test.css
* { padding: 0; margin: 0; } body { height: 100%; } .container { overflow: hidden; } .sidebar { width: 12.5%; float: left; margin-bottom: -9999px; padding-bottom: 9999px; background-color: red; } .content-right { margin-left: 12.5%; } .header { width: 100%; background-color: blue; height: 100px; } .content { width: 100%; background-color: green; } .footer { width: 100%; height: 50px; background-color: pink; }
註意：一定要添加一個container包含所有內容，並添加overflow：hidden；否則會有9999px的空白。如果把overflow：hidden；添加到body上，頁面將沒有高度上的滾動條。
test.js
1 var _height = document.documentElement.clientHeight-150; 2 document.getElementsByClassName(‘content‘)[0].style.minHeight = _height + ‘px‘; 3 window.onresize = function() { 4 var _height = document.documentElement.clientHeight-150; 5 document.getElementsByClassName(‘content‘)[0].style.minHeight = _height + ‘px‘; 6 };
每當瀏覽器窗口大小改變的時候，重置一下頁面內容的高度。
兩列布局，左邊自適應，右邊高度不定