分享几个自适应布局方式（持续更新）

布局技巧

最新推荐文章于 2024-06-28 21:22:19 发布

weixin_30399821

最新推荐文章于 2024-06-28 21:22:19 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yaokunlun/p/6505631.html

本文介绍两种网页布局技巧：一种是实现上下高度固定，中间内容区域自适应的布局；另一种是实现左侧宽度固定，右侧宽度自适应的布局。通过具体的HTML和CSS代码示例，展示了如何使用绝对定位和Flex布局来达到预期效果。

1.上下高度固定中间内容区域自适应

实现方式，上下固定高度，底部绝对定位，中间区域绝对定位，设置top,bottom值为上下部分高度。

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,div{
            padding:0;
            margin:0;
        }
        .top{
            background:red;
            height:100px;
        }
        .bottom{
            position: absolute;
            width:100%;
            height:100px;
            bottom:0;
            background: green;
        }
        .main{
            background:#f90;
            width:100%;
            position: absolute;
            top:100px;
            bottom:100px;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="main"></div>
<div class="bottom"></div>
</body>
</html>

效果图：

（颜色辣眼睛。。。。）

2.左边宽度固定，右边宽度根据屏幕宽度自适应

实现方式，如下：

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,div{
            padding:0;
            margin:0;
        }
        .left{
            background:red;
            position: absolute;
            height: 300px;
            width: 300px;
        }
        .right{
            margin-left:300px;
            height:300px;
            background: #ccc;
        }
      
    </style>
</head>
<body>
   <div class="left"></div>
   <div class="right"></div>
</body>
</html>

效果图：

当然，如果右边还有固定的部分，只需要给中间部分加上 margin-right：value；就可以实现自适应了；

另外实现这种布局还有一种很好的方法，一般用在移动端，就是flex布局

 <div class="container">
    <div class="left"></div>
    <div class="right"></div>
  </div>

css

 .container{
      display: flex;
    }
    .left{
      flex:0 0 200px;
      background: #ccc;
    }
    .right{
      flex: 1;
      background: #00a0dc;
    }