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
前言 前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板:然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片.我当时想着,抛开技术实现层面, ...
随机推荐
- SQL必知必会 —— 性能优化篇
数据库调优概述 数据库中的存储结构是怎样的 在数据库中,不论读一行,还是读多行,都是将这些行所在的页进行加载.也就是说,数据库管理存储空间的基本单位是页(Page). 一个页中可以存储多个行记录(Ro ...
- JS阻止冒泡事件
<!DOCTYPE html><html><head> <title></title> <style type="text/ ...
- 老Python带你从浅入深探究List
列表 Python中的列表(list)是最常用的数据类型之一. Python中的列表可以存储任意类型的数据,这与其他语言中的数组(array)不同. 被存入列表中的内容可称之为元素(element)或 ...
- C++ string的size()和length()函数没有区别
C++标准库中的string中两者的源代码如下: size_type __CLR_OR_THIS_CALL length() const { // return ...
- 【转】java-selenium三种等待方式
方式1: 线程等待:Thread.sleep(xxxx) 只要在case中加入sleep就会强制等待设置的时间后才会执行之后的命令,这种等待一般适用于调试脚本的时候. java代码: //等待3秒 T ...
- Django（27）类视图
类视图 在写视图的时候,Django除了使用函数作为视图,也可以使用类作为视图.使用类视图可以使用类的一些特性,比如继承等. View django.views.generic.base.View是主 ...
- .NET平台系列10 .NET统一平台愿景
系列目录 [已更新最新开发文章,点击查看详细] 2019年,微软分享了[统一的.NET堆栈和生态系统的愿景].给开发者带来的价值是,将能够使用一组API,语言和工具来针对广泛的应用程序类型,包 ...
- 驰骋CCFlow开源工作流程引擎如何设置PDF打印
前言 经常有驰骋CCFlow爱好者朋友提问关于打印相关问题.在这篇博文中大家介绍一下工作流引擎CCFlow的HTML打印和PDF打印,针对Java版本和.NET版本有不同的操作步骤,包括开关设置.水印 ...
- 用JIRA管理你的项目——（三）基于LDAP用户管理
JIRA提供了基于LDAP方式的用户管理,也就是用户密码的管理交给LDAP,而JIRA只管理用户在系统中的角色. 要打开JIRA的LDAP设置,首先需要验证下你的LDAP服务是否正常! 几乎有所有的L ...
- [刷题] PTA 6-11 求自定类型元素序列的中位数 (25分)
采用希尔排序 1 #include <stdio.h> 2 3 #define MAXN 10 4 typedef float ElementType; 5 6 ElementType M ...