网站建设
 
    收藏本站 
用户ID/邮箱: 密 码:
客户中心 Customer service 您目前的位置:首 页 > 客户中心 > DIV+CSS 



DIV+CSS,网站建设DIV+CSS:关于左边固定,右边自适应布局的响应式布局写法

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

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

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>

 


上一条: html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切
下一条: css常用属性总结之 id和class的区别,使用类还是ID?
相关文章
css常用属性总结之 id和class的区别,使用类还是ID?
关于左边固定,右边自适应布局的响应式布局写法
html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切
推广经验分享
其它
网站建设资源
常见问题
网站知识
首页关于我们业务范围新闻资讯成功案例客服中心联系我们深圳网站建设网站优化付款帐户
COPYRIGHT(C) 2005-2019 亚网互联·中国 版权所有 ALL RIGHTS RESERVED (粤ICP备15005241号)
深圳网站建设公司地址:深圳市宝安区龙华民治大道东明大厦15楼 1529-1531 室   E-Mail:web@yanet.cn  
公司电话:0755-89812581(8线)  
深圳市亚网科技有限公司 深圳网站建设常年法律顾问:朱运德律师