关于左边固定，右边自适应布局的响应式布局写法

最新推荐文章于 2021-11-30 14:17:37 发布

weixin_30265171

最新推荐文章于 2021-11-30 14:17:37 发布

阅读量124

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/daniel-lij/p/6442975.html

版权

关于响应式布局现才接触到，虽然代码很简单，但是对基础要求还是有一些。

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>

转载于:https://www.cnblogs.com/daniel-lij/p/6442975.html

weixin_30265171

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于左边固定，右边自适应布局的响应式布局写法

关于响应式布局现才接触到，虽然代码很简单，但是对基础要求还是有一些。1.left设置position:absolute和width：70px；那么右边用margin-left：70px；因为是响应式的我用jquery设置了一下高度（不用jquery，直接设置高度为100%好像不行，不知道为什么有知道的小伙伴，可以在下面留言，有改进的也可以在下面留言）；代码如下<!DOCTYPE ...
复制链接

扫一扫