首页 > 其他分享 >css--常见左右盒子宽度高度自适应布局

css--常见左右盒子宽度高度自适应布局

时间:2023-04-27 21:25:39浏览次数:47  
标签:flex 盒子 -- 100% height solid 1px border css

css--常见左右盒子宽度高度自适应布局

 

前言

  前端开发工程师最基础的技能要求是根据 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布局中 align-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 使得溢出的部分隐藏。

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

 

总结

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

标签:flex,盒子,--,100%,height,solid,1px,border,css
From: https://www.cnblogs.com/ministep/p/17360231.html

相关文章

  • RCU-55——RCU案例汇总
    基于Linux-5.10一、经典(可抢占)RCU1.例子-RCU链表假设链表节点和头结点如下:typedefstruct{structlist_headlink;structrcu_headrcu;//usedforcall_rcu()intkey;intval;}test_entry;structlist_headtest_head;读者访问链表方法如下......
  • 10 如何表示虚拟内存
    x86CPU的虚拟地址空间划分:一个应用往往拥有很大的连续地址空间,并且每个应用都是一样的,只有在运行时才能分配到真正的物理内存,在操作系统中被称为虚拟内存;x86CPU支持虚拟地址时要么开启保护模式要么开启长模式;保护模式下是32位,没有进行任何划分;长模式下64位,但是CPU只是实现了4......
  • 解决 Error querying database. Cause: org.postgresql.util.PSQLException: ��������: �û� "p
    最近做数据库作业做得很崩溃,本来就没学过java,结果还要用mybatis+servlet+jsp,,,,,没办法还是得学啊TT遇到个特别无语的报错:###Errorqueryingdatabase. Cause:org.postgresql.util.PSQLException:��������:�û�"postgres"Password��֤ʧ��###Theerrormayexistincom/test/entity/gra......
  • 4.27打卡
     #include<bits/stdc++.h>usingnamespacestd;classTime{private:intminute;inthour;public:voidset(inth,intm){minute=m;hour=h;}friendintoperator-(Time,Time);};intoperator-(......
  • 攻防世界_Normalrsa
    看了WP才知道,pem文件是公钥文件,里面包含了加密过程的e和大素数n,而flag.enc文件则是该加密过程得到的密文。 首先,用kali中自带的openssl工具对pem文件中的e和n进行提取   可知,e=65537, Modules(十六进制)=C2636AE5C3D8E43FFB97AB09028F1AAC6C0BF6CD3D70EBCA281BFFE97FB......
  • js--预加载、预渲染、懒加载、懒执行
    js--预加载、预渲染、懒加载、懒执行      ......
  • 关于一些在EasyX图形库上的音乐播放问题
    首先需要包含两个头文件    ①#include<graphics.h>        ②#include<mmsystem.h>                    ③#pragmacomment(lib,"winmm.lib")     (因为使用的是windows的设备,就需要包含windows.h头文件,但是graphi......
  • ABC238 Editorial
    A-ExponentialorQuadratic题意给定一个\(n\),问\(2^n>n^2\)是否成立。分析手搓样例,发现只有\(2,3,4\)不满足条件,输入输出题。code#include<bits/stdc++.h>#pragmaGCCtarget("sse,sse2,sse3,ssse3,sse4,popcnt,abm,mmx,avx,avx2")#defineLLlonglong#define......
  • lua元表、元方法
    lua元表、元方法lua官方参考手册:https://www.runoob.com/manual/lua53doc/manual.html#2.4一、总结:☺1、普通的表,找不到了,或者无法进行运算的时候,考虑设置到它身上的元表的元方法2、元表的本质:其实元表本质上就是普通的表,它只是在功能上和别人不一样!实际上,它还是一张普通......
  • Blender快捷键整理(持续更新)
    A全选AA取消全选(按两次A)Shift+D复制物体(右键或者ESC取消移动)Shift+鼠标中键盘移动视角鼠标滚轮推拉视角鼠标中键按住旋转视角Ggrab移动Sscale缩放Rrotate旋转小键盘.聚焦选中物体波浪键~饼状菜单--查看所选X删除Shift+A添加模型F3搜索(快速烟雾)......