两列等高布局详解
来源:互联网 发布:加农炮升级数据 编辑:程序博客网 时间:2024/06/07 03:00
两列等高布局应该还是比较常见的布局。通常在左侧固定,右侧自适应这样的页面中比较常见,下面放张我近期做的一个项目图片。
如上图所示,左侧的菜单栏和右侧的页面主体高度都是未知的,谁也不知道后期会加多少内容。但是为了页面好看,两边又必须要等高。下面给大家深度剖析两种方案实现等高布局。
方案1:纯CSS实现等高(代码少,效果好。也是我比较推荐的)
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>*{margin: 0; padding: 0;}.wrap{overflow: hidden;}.left{width: 100px; height: 200px; float: left; background: #149BDF; padding-bottom: 5000px; margin-bottom: -5000px;}.right{width: 200px; height: 400px; margin-left: 150px; background: #32CD32;}</style></head><body><div class="wrap"><div class="left"></div><div class="right"></div></div></body></html>
先上效果图,一睹为快。简单说下要点,外层包裹一个div,宽高不限,一定要加上overflow:hidden;(裁剪超出的部分)。右边的div决定整个页面的高度,所以左边的div高度是由右边的决定。左边的div我给出的高度为200,右边的为400,但是从视觉上却实现了等高,为什么。其根本原因在于设置它的padding-bottom值(俗称内补白),众所周知,padding补出的地方是可以被background占有的。如果我们给左边的div只加一个padding值的话,页面将会是这样。如下图:
为什么,因为padding值也是要占据空间的,即使最外层div设置了overflow:hidden;但是此时它的div是由左边的div决定的,我们要做的是最外层div的高度由右边的决定,并且左边的div可视范围也是由右边的div决定。这时,我们给左边的div加上与它的padding值相等的负margin值。效果如下图所示,此时去掉了最外层div的overflow:hidden;
如上图所示,最外层div的高度为400,跟右边的div是相等的。而左边的div看似长长的一坨,实际占据的高度只有200,也就是它自身的高度,因为负margin值将它的padding占据的高度给抵消了。仅仅是占据的空间抵消了,但实际上被人们看到的那一"坨"还是很长很长的,我们加个overflow:hidden;将它"切"了,然后任意调整右边div的高度就可以看到等高效果了。
方案2:纯JS实现等高(简单粗暴,易于理解,直接上代码)
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>*{margin: 0; padding: 0;}html,body{height: 100%;}.wrap{height: 100%;}.left{width: 100px; height: 200px; float: left; background: #149BDF;}.right{width: 200px; height: 50%; margin-left: 150px; background: #32CD32;}</style></head><body><div class="wrap"><div class="left"></div><div class="right"></div></div><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">var h = $('.right').height();console.log(h);$('.left').height(h);</script></body></html>
效果跟第3张图一样,就不一一展示了,但是上面的方法有一个弊端。因为js是在页面加载完后执行的,且只执行一次。如果我们更改浏览器窗口的大小,那么就悲剧了。
看变成这样子。右边的div高度由css决定,很顺从的随着浏览器改变而改变。左边的高度由js决定的,必须刷新才能改变。影响体验呀
不过没事,车道山前必有路。这点小事不算事。jquery中有一个监听浏览器窗口改变的函数,叫resize()。改变一下窗口大小,执行一次函数就可以了。上代码:
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>*{margin: 0; padding: 0;}html,body{height: 100%;}.wrap{height: 100%;}.left{width: 100px; height: 200px; float: left; background: #149BDF;}.right{width: 200px; height: 50%; margin-left: 150px; background: #32CD32;}</style></head><body><div class="wrap"><div class="left"></div><div class="right"></div></div><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">function setHeight(){var h = $('.right').height();console.log(h);$('.left').height(h);}setHeight();$(window).resize(function(){setHeight();})</script></body></html>
好了,完结!
- 两列等高布局详解
- 两列等高布局
- 两列等高布局的实现
- 两列或多列等高布局实现
- 两列等高
- 等高列布局
- 等高列布局
- 实现两(三)列等高布局的方法
- 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高
- 多列等高布局
- 多列等高布局
- 多列等高布局
- 页面布局 --- 多列等高布局
- div实现两列等高
- 八种创建等高列布局
- 八种创建等高列布局
- 多列等高CSS布局
- 1.多列等高布局
- spring-data-redis序列化实践笔记
- Dynamic CRM 2016使用WEB API删除记录(js)
- 构建高性能的弹幕应用
- Thread Safety Analysis
- 安装红帽linux到虚拟机
- 两列等高布局详解
- 简单的车牌识别预处理小程序
- Android中获取应用程序(包)的信息-----PackageManager的使用(一)
- 乱码问题集锦
- 前端每周清单第 34 期:Vue 现状盘点与 3.0 展望,React 代码迁移与优化,图片优化详论
- C++ ofstream写文件时OD错误 ifstream读文件时0x20错误
- 玩转阿里云上Kubernetes 1.7.2 高可用部署
- Python将xls导入mysql
- Java 多线程 (PART XVI)生产者消费者(I) 单个生产者单个消费者