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
前言 前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板:然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片.我当时想着,抛开技术实现层面, ...
随机推荐
- 【maven】理论知识
Maven是跨平台的项目管理工具,主要服务于Java平台的项目构建.依赖管理. 项目构建 项目构建过程包括[清理项目]→[编译项目]→[测试项目]→[生成测试报告]→[打包项目]→[部署项目]这几个步 ...
- Asp.NetCore Web开发之RazorPage
这节讲一下Razor页面. 首先要明确,Razor 不是一种编程语言.它是服务器端的标记语言,配合C#语言,就可以像PHP语言语言一样(但它们并不相同),处理HTML页面逻辑.它是Asp.NetCor ...
- 免费JS甘特图组件dhtmlxgantt
安装 参考:https://docs.dhtmlx.com/gantt/desktop__install_with_bower.html 可使用NuGet.Bower.npm包管理器安装(应用在asp ...
- x265 code tracing
方瑞东的博客专栏 http://blog.csdn.net/frd2009041510/article/details/51182920 cabbage2008的专栏 http://blog.csdn ...
- 5分钟让你理解K8S必备架构概念，以及网络模型（中）
写在前面 在这用XMind画了一张导图记录Redis的学习笔记和一些面试解析(源文件对部分节点有详细备注和参考资料,欢迎关注我的公众号:阿风的架构笔记 后台发送[导图]拿下载链接, 已经完善更新): ...
- 【海通国际】Joe Lowry（Mr. Lithium）谈全球电池原材料供应危机
[海通国际]Joe Lowry(Mr. Lithium)谈全球电池原材料供应危机 环球锂业公司(Global Lithium)总裁Joe Lowry日前接受了欧洲锰业Euro Manganese的邀请 ...
- [笔记] 《c++ primer》书店程序 Chapter 1
书店程序是<c++ primer>中重要的实例,涉及大部分重要知识点,但代码分散阅读不便,下面按照章节顺序总结 Sales_item.h #ifndef SALESITEM_H // we ...
- 【转载】geany linux python编译器 开源
http://www.dekiru.cn/?p=1491 Geany 不好用,建议用一些好用的编辑器或ide Subliem Text 或 VS code Pycharm等. 设置运行环境 菜单栏–生 ...
- groovy脚本语言基础1
一 搭建groovy环境 安装JDK [root@node1 ~]# yum -y install java-11-openjdk 官网下载groovySDK下载 https://groovy.ap ...
- 又卡了～从王者荣耀看Android屏幕刷新机制
前言 正在带妹子上分的我,团战又卡了,我该怎么向妹子解释?在线等. "卡"的意思 不管是端游还是手游,我们都会时不时遇到"卡"的时候,一般这个卡有两种含义: 掉 ...