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布局中 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--常见左右盒子高度自适应布局的更多相关文章
- css经典布局——头尾固定高度中间高度自适应布局
转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...
- 典型的DIV CSS三行二列居中高度自适应布局
如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...
- CSS float 父元素高度自适应
<html> <head><title></title><style type="text/css">*{margin: ...
- 让tableView的高度等于contentSize的高度、动态调整tableView的高度、tableView的高度自适应布局
文章概要: 1.简介下,tableView中的内容如何高度自适应的布局 2.如何做到让tableView的高度动态调整 还是看图作文吧- 首先,tableView的高度就是用户能够看见里面更大世界的那 ...
- CSS完美实现iframe高度自适应（支持跨域）
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...
- css回顾之左侧宽度自适应布局
目标: <!DOCTYPE html> <meta charset=utf-8> <html> <head> <title>alibaba& ...
- css上下或者上中下 自适应布局
方法就是头部不变,中间和底部绝对定位 *{ margin: ; padding: ; } div{ text-align: center; font-size: 30px; } .header,.fo ...
- CSS布局之-高度自适应
何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在 ...
- 记一次产品需求：图片等比缩放和CSS自适应布局16:9
前言 前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板:然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片.我当时想着,抛开技术实现层面, ...
随机推荐
- C++中使用sort对常见容器排序
本文主要解决以下问题 STL中sort的使用方法 使用sort对vector的排序 使用sort对map排序 使用sort对list排序 STL中sort的使用方法 C++ STL 标准库中的 sor ...
- git取消更改 恢复版本命令
#删除远程的xxx分支 git push origin :xxx #取消对文件的修改.还原到最近的版本,废弃本地做的修改. git checkout -- <file> #取消已经 ...
- 关于__new__和__call__的想法
__new__和__call__很像,两个都是用来产生对象的 __new__用来产生的对象是'类',class 时触发(不是) __call__用来产生的对象是'对象',这种对象无法继续产生对象,但是 ...
- istio部署问题Q&A
端口绑定无权限 创建Gateway,提示绑定端口无权限. 2020-12-27T12:25:30.974288Z warning envoy config gRPC config for type.g ...
- 常用加密算法学习总结之数字证书与TLS/SSL
数字证书 对于一个安全的通信,应该有以下特征: 完整性:消息在传输过程中未被篡改 身份验证:确认消息发送者的身份 不可否认:消息的发送者无法否认自己发送了信息 显然,数字签名和消息认证码是不符合要求的 ...
- 【转载】 Linux常用命令: zip、unzip 压缩和解压缩命令
Linux常用命令: zip.unzip 压缩和解压缩命令 Linux常用命令: zip.unzip 压缩和解压缩命令 zip的用法 基本用法是: zip [参数] [打包后的文件名] [打包的目 ...
- centos 7修改yum源
centos系统要定期更新,前天使用sudo yum update命令更新过程中出错,安装的是x64的系统,结果更新的内容有i686的依赖包,最终由于64与32位系统依赖的原因导致更新失败,更糟糕的是 ...
- JDK5.0新特性1
目录 静态导入 自动装箱/拆箱 for-each循环 可变参数 枚举 JDK 5.0 新特性简介 JDK 5.0 的一个重要主题就是通过新增一些特性来简化开发,这些特性包括: 静态导入 自动装箱/拆箱 ...
- sklearn中，数据集划分函数 StratifiedShuffleSplit.split() 使用踩坑
在SKLearn中,StratifiedShuffleSplit 类实现了对数据集进行洗牌.分割的功能.但在今晚的实际使用中,发现该类及其方法split()仅能够对二分类样本有效. 一个简单的例子如下 ...
- ffmpeg安装之linux编译安装
转发自白狼栈:查看原文 关于ffmpeg的安装,有的人可能要折腾很久,甚至折腾一个礼拜,究其原因,基本都是编译安装惹的祸. 我们提供4种安装方式,最复杂的莫过于centos7上的编译安装. ffmpe ...