首頁 > 開發者 > JavaScript
關於左邊固定，右邊調適型配置的響應式布局寫法，自適應寫法
關於響應式布局現才接觸到，雖然代碼很簡單，但是對基礎要求還是有一些。
1.left設定position:absolute和width：70px；那麼右邊用margin-left：70px；因為是響應式的我用jquery設定了一下高度（不用jquery，直接設定高度為100%好像不行，不知道為什麼有知道的小夥伴，可以在下面留言，有改進的也可以在下面留言）；代碼如下
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html{ height: 100%;} body{ margin: 0; height: 100%;} .left{ position: absolute; width: 88px; height:100%;
background:red; } .right{ margin-left: 88px; border: 1px red solid;
background:blue; } </style> <script src="js/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".right").css("height",$(window).height()+"px"); $(window).resize(function(){ $(".right").css("height",$(window).height()+"px"); }); }); </script> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body></html>
2.左邊浮動，右邊overflow:auto;
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html{ height: 100%;} body{ margin: 0; height: 100%;} .left{ float:left; width: 88px; background:red; } .right{ overflow: auto; height: 200px; background: blue; } </style> <script src="js/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".right").css("height",$(window).height()+"px"); $(window).resize(function(){ $(".right").css("height",$(window).height()+"px"); }); }); $(function(){ $(".left").css("height",$(window).height()+"px"); $(window).resize(function(){ $(".left").css("height",$(window).height()+"px"); }); }); </script> </head> <body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
