首页 > 代码库 > div css左边固定右边自适应布局

div css左边固定右边自适应布局

2024-08-25 01:07:46   217人阅读

web前端开发之布局：先看效果图，最简单的左右布局。有可能还会被面试问道哈哈哈。一看也没什么特别之处，就是左边固定，右边自适应，就这么简单。

原理：通过设置一个margin-left;或者margin-right就可以搞定。方法有很多，这次就只介绍这种设置margin的。

技术分享

 代码：

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
    <style>
    body{
        margin:0;
        padding:0;
    }  
        #wrap {
            overflow: hidden; *zoom: 1;
        }
        #content ,#sidebar {
            #eee; 
        }
        #sidebar {
            float: left; width: 300px;
            background-color:pink;
            position:fixed;
            top:50px;
            left:0;
        }
        #content {
            margin-left: 310px;
            height:1000px;
            background-color:#e456aa;
            margin-top:50px;
        }
        #footer {
            background-color: #f00;
            color:#fff; 
            margin-top: 1em;
        }
    </style>
 
 </head>
 <body>
    <div style="width:100%;height:50px;line-height:50px;background-color:#ccc;position:fixed;top:0;left:0;">这是头部:web前端开发大全</div>
    <div id="wrap">
        <div id="sidebar" style="height:600px;">固定宽度区：微信号：jingfeng18</div>
        <div id="content" style="height:1340px;">自适应区</div>
    </div>
    <div id="footer">这是尾部，想写什么就写什么，这是一个神奇的地方</div>
 </body>    
</html>

   

非常简单，如果你还有更好的方法，欢迎前来投稿交流。只为学习更多，技术更上一层楼，早日升职加薪，赢取白富美，走上人生巅峰。学习更多前端技术就在：web前端开发视大全

请记住我们的网站：http://www.qianduanshiping.com  微信号：jingfeng18

div css左边固定右边自适应布局


联系
我们