前言

　　前端开发工程师最基础的技能要求是根据 ui 设计稿还原网页，这就缺少不了必要的网页布局，首先看下最近小伙伴问我的一个问题，他说一个网页有左右两个部分，左右两个部分的高度都不固定，要使得右部分的宽度充满剩余的部分，并且高度随着左边的高度发生自适应，而左侧的高度随着内容的高度发生变化，对于这么一个简单的网页布局，对于一个入行不久的小白来说遇到这样的问题肯定束手无策，本文就来整理一下我实现这种布局的集中方案。

正文

　　分析上面的需求，很快构建出基础的布局方案，具体效果如下：下面是总结的几种实现方案：

　　

　　1.高度height:auto

　　首先来了解下 height:100% 和 height:auto 的区别，height:100%,是指相对父元素高度而定义的高度，也就是按它最近且有定义的高度的父元素来定义高度，height:auto 是根绝块内内容的高度来调节高度。看到这里你可能会觉得把右边盒子通过设置height:100% 来继承父元素的盒子即可，但是如果你仔细看需求，左边盒子高度也是随内容的高度称大，所以这种方案行不通。因此需要使用height:auto来搭配flex布局来实现。

<style>

    .wrap {

      width: 100%;

      border: 1px solid red;

      display: flex;

    }

    .left {

      width: 800px;

      border: 1px solid red;

    }

    .item1 {

      width: 100%;

      height: 200px;

      border: 1px solid black;

    }

    .item2 {

      width: 100%;

      height: 50px;

      border: 1px solid black;

    }

    .item3 {

      width: 100%;

      height: 80px;

      border: 1px solid black;

    }

    .right {

      flex: 1;

      height: auto;

      border: 1px solid red;

      display: flex;

    }

    .item4 {

      flex: 1;

    }

  </style>

<body>

  <div class="wrap">

    <div class="left">

      <div class="item1">1</div>

      <div class="item2">2</div>

      <div class="item3">3</div>

    </div>

    <div class="right">

      <div class="item4">right</div>

    </div>

  </div>

</body>

　　上面的代码，首先设置最外层父元素wrap的宽度为整个浏览器body宽度，给其设置flex布局，使得左右两个盒子横向布局，给左边盒子设置固定宽度，右边盒子flex:1 就会使得右边盒子自适应撑满整个父元素，使其宽度自适应，然后高度设置为auto,适应了父元素的高度。

　　2.felx布局中 algin-items:stretch

<style>

    .wrap {

      width: 100%;

      border: 1px solid red;

      display: flex;

      align-items: stretch;

    }

    .left {

      width: 800px;

      border: 1px solid red;

    }

    .item1 {

      width: 100%;

      height: 200px;

      border: 1px solid black;

    }

    .item2 {

      width: 100%;

      height: 50px;

      border: 1px solid black;

    }

    .item3 {

      width: 100%;

      height: 80px;

      border: 1px solid black;

    }

    .right {

      flex: 1;

      border: 1px solid red;

      display: flex;

    }

    .item4 {

      flex: 1;

    }

  </style>

<body>

  <div class="wrap">

    <div class="left">

      <div class="item1">1</div>

      <div class="item2">2</div>

      <div class="item3">3</div>

    </div>

    <div class="right">

      <div class="item4">right</div>

    </div>

  </div>

</body>

　　上面的代码，设置algin-items:stretch ，是 flex 布局中设置子元素在交叉轴方向的长度拉伸至父元素的长度，这里主轴为横轴，flex:1，使得右侧盒子宽度自适应，交叉轴是纵轴，设置 stretch 后，右侧盒子拉伸至父元素的高度，从而实现了高度自适应。

　　3.通过 margin-bottom 和padding-bottom 设置为相同的值

<style>

      .wrap {

        height: 100%;

        width: 100%;

        border: 1px solid red;

        overflow: hidden;

        display: flex;

      }

      .left {

        margin-bottom: -5000px;

        padding-bottom: 5000px;

        float: left;

        width: 800px;

        background-color: skyblue;

        border:2px solid pink;

      }

      .item1 {

        width: 100%;

        height: 200px;

        border: 1px solid black;

      }

      .item2 {

        width: 100%;

        height: 50px;

        border: 1px solid black;

      }

      .item3 {

        width: 100%;

        height: 80px;

        border: 1px solid black;

      }

      .right {

        flex: 1;

        float: right;

        margin-bottom: -5000px;

        padding-bottom: 5000px;

        background-color: tan;

        border: 2px solid pink;

      }

    </style>

<body>

    <div class="wrap">

      <div class="left">

        <div class="item1">1</div>

        <div class="item2">2</div>

        <div class="item3">3</div>

        <div class="item3">3</div>

        <div class="item2">3</div>

        <div class="item1">3</div>

      </div>

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

    </div>

  </body>

　　上面的代码通过设置flex布局，使得左右两个盒子宽度自适应，然后分别设置左右两个盒子margin-bottom 和padding-bottom 为相同的值，使得左右两个盒子的高度相同，但是内部元素无法撑满这个高度，存在溢出的部分，因此需要给父元素设置 overflow:hidden 使得溢出的部分隐藏。

　　最后，宝，今天我去打疫苗了，打的爱你的每一秒。我的宝。

总结

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。

css--常见左右盒子高度自适应布局的更多相关文章

  1. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  2. 典型的DIV CSS三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...

  3. CSS float 父元素高度自适应

    <html> <head><title></title><style type="text/css">*{margin: ...

  4. 让tableView的高度等于contentSize的高度、动态调整tableView的高度、tableView的高度自适应布局

    文章概要: 1.简介下,tableView中的内容如何高度自适应的布局 2.如何做到让tableView的高度动态调整 还是看图作文吧- 首先,tableView的高度就是用户能够看见里面更大世界的那 ...

  5. CSS完美实现iframe高度自适应（支持跨域）

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...

  6. css回顾之左侧宽度自适应布局

    目标: <!DOCTYPE html> <meta charset=utf-8> <html> <head> <title>alibaba& ...

  7. css上下或者上中下 自适应布局

    方法就是头部不变,中间和底部绝对定位 *{ margin: ; padding: ; } div{ text-align: center; font-size: 30px; } .header,.fo ...

  8. CSS布局之-高度自适应

    何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在 ...

  9. 记一次产品需求：图片等比缩放和CSS自适应布局16:9

    前言 前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板:然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片.我当时想着,抛开技术实现层面, ...

随机推荐

  1. ThinkPHP5查询-select与find理解

    出现问题 在tp5框架中判断select查询结果是否为空时,无论查询条件是否满足,判断查询结果都不为空 解析问题 select查询的是多条数据,若查询数据为空,则返回一个空的二维数组 array(ar ...

  2. 【ECharts】报表联动，动态数据设计

    说明: 数据没有拉取后台数据,仅仅前端模拟数据,Copy即可有效果.联动后台时,使用异步获取数据即可.鼠标点击,动态展示点击项的数据.有关更多实例,请移步到echarts官网查看. 成果展示: 相关代 ...

  3. TortoiseGit:拉代码密码错误remote: Coding 提示: Authentication failed! 认证失败，请确认您输入了正确的账号密码

    问题 在控制面板里找到凭据管理器 修改密码之后拉取密码

  4. 【小技巧】启动Tomcat 提示端口被占用 怎么办？一句命令解决

    windows环境: 方法1: 1.win+r 打开黑界面 2.输入命令 netstat -ano|findstr 8080 3.输入命令 taskkill /pid xxxx /f Linux环境: ...

  5. 痞子衡嵌入式：可通过USB Device Path来唯一指定i.MXRT设备进行ROM/Flashloader通信

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是通过USB Device Path来唯一指定i.MXRT设备进行ROM/Flashloader通信. i.MXRT系列高性能微控制器从2 ...

  6. 23.Quick QML-简单且好看的图片浏览器-支持多个图片浏览、缩放、旋转、滑轮切换图片

    之前我们已经学习了Image.Layout布局.MouseArea.Button.GroupBox.FileDialog等控件. 所以本章综合之前的每章的知识点,来做一个图片浏览器,使用的Qt版本为Q ...

  7. JavaWeb——反射、注解

    单元测试.反射.注解 1. Junit单元测试 2. 反射 3. 注解 Junit单元测试: * 测试分类: 1. 黑盒测试:不需要写代码,给输入值,看程序是否能够输出期望的值. 2. 白盒测试:需要 ...

  8. CodeForces - 879

    A 题意:就是一共有n个医生,每个医生上班的时间是第Si天,之后每隔d天去上班,问最少多少天能够访问完这n名医生 思路:直接进攻模拟就可以 代码: 1 #include<iostream> ...

  9. JMM——Java内存模型抽象|八种同步操作|操作规则

    JMM 调用栈&本地变量在线程栈上 对象整体在堆上(包括其本地变量,不论类型),栈有其引用即可访问, 线程调用同一个对象时,是访问该对象的私有拷贝 每个CPU有自己的高速缓存 高速缓存存在意义 ...

  10. Flutter 2.2 更新详解

    Flutter 2.2 版已正式发布!要获取新版本,您只需切换到 stable 渠道并更新目前安装的 Flutter,或前往 flutter.cn/docs/get-started 从头开始安装. 虽 ...