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

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

新老客户大回馈,云服务器低至5折

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

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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:XHTML与HTML的区别

下一篇:盒模型的学习整理转述