关于响应式布局现才接触到，虽然代码很简单，但是对基础要求还是有一些。
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>
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
