首页 > > 网页制作 > css >

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

2018-06-24 01:00:26来源：未知阅读 ()

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

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>