关于左边固定,右边自适应布局的响应式布局写法
关于响应式布局现才接触到,虽然代码很简单,但是对基础要求还是有一些。
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>