高度自适应

本文讲的等高布局是在不手动设置元素高度的情况下，使用纯css实现各个元素高度都相当的效果。如图：1、使用table-cell实现(兼容IE8)<style> body,div,ul,li{margin: 0;padding: 0;} li{list-style: none;} .table-layout-container{ width: 50%; margin: 20px auto; } .table-row-layout{ /* 当元素display设置为table-row后，再设置宽度就没有效果了，因此需要再包裹一层div，然后给它设置宽度 */ display: table-row; } .table-cell-layout{ display: table-cell; width: 33.33%; padding: 10px; border: 1px solid #ccc; border-left: none; } .table-cell-layout:first-child{ border-left: 1px solid #ccc; }</style><body> <div class=“table-layout-container”> <ul class=“table-row-layout”> <li class=“table-cell-layout”> 行业的发展必然带来职业的细分，在前端领域也一样，目前行业前端有下面这几个方向：界面展现用户体验和可访问性方向、后的js/nodejs开发方向、audio/video音视频富媒体方向、SVG/canvas/webGL动效创意表现与数据可视化方向、工具建设文档管理内部站建设的前端运维方向以及会议预定团建组织对外品牌宣传的前端运营方向。 </li> <li class=“table-cell-layout”> 由于每个人的性格特质，成长经历的差异，自然适合的方向也不一样。感性细腻有设计背景可以专注于用户体验，纯逻辑工程化思维浓郁则更适合偏后开发，数学物理强悍可以考虑数据可视化方向，沟通协调能力很强可以朝着前端运营方向努力。 </li> <li class=“table-cell-layout”> 在学生时代，大家都很纯粹，我喜欢这个就学这个，例如，很多女生很喜欢CSS，写页面，做效果。但是，等她开始找工作，还是接触真实的行业圈子的时候，事情就发生了变化。 </li> </ul> </div></body>2、使用flex布局实现<style> body,div,ul,li{margin: 0;padding: 0;} li{list-style: none;} .flex-layout{ display: flex; width: 50%; margin: 20px auto; } .flex-item{ width: 33.33%; padding: 10px; border: 1px solid #ccc; border-left: none; } .flex-item:first-child{ border-left: 1px solid #ccc; }</style><body> <ul class=“flex-layout”> <li class=“flex-item”> 行业的发展必然带来职业的细分，在前端领域也一样，目前行业前端有下面这几个方向：界面展现用户体验和可访问性方向、偏后的js/nodejs开发方向、audio/video音视频富媒体方向、SVG/canvas/webGL动效创意表现与数据可视化方向、工具建设文档管理内部站建设的前端运维方向以及会议预定团建组织对外品牌宣传的前端运营方向。 </li> <li class=“flex-item”> 由于每个人的性格特质，成长经历的差异，自然适合的方向也不一样。感性细腻有设计背景可以专注于用户体验，纯逻辑工程化思维浓郁则更适合偏后开发，数学物理强悍可以考虑数据可视化方向，沟通协调能力很强可以朝着前端运营方向努力。 </li> <li class=“flex-item”> 在学生时代，大家都很纯粹，我喜欢这个就学这个，例如，很多女生很喜欢CSS，写页面，做效果。但是，等她开始找工作，还是接触真实的行业圈子的时候，事情就发生了变化。 </li> </ul></body>3、利用margin实现等高布局(实际开发中不建议使用)实现上面的等高布局除了可以使用table-cell、flex布局外还可以利用margin负值来实现<style> body,div,ul,li{margin: 0;padding: 0;} li{list-style: none;} .marign-layout{ width: 50%; margin: 20px auto; overflow: hidden; } .item{ float: left; width: 30%; padding: 10px; margin-bottom: -9999px; padding-bottom: 9999px; border: 1px solid #ccc; border-left: none; } .item:first-child{ border-left: 1px solid #ccc; }</style><body> <ul class=“marign-layout”> <li class=“item”> 行业的发展必然带来职业的细分，在前端领域也一样，目前行业前端有下面这几个方向：界面展现用户体验和可访问性方向、偏后的js/nodejs开发方向、audio/video音视频富媒体方向、SVG/canvas/webGL动效创意表现与数据可视化方向、工具建设文档管理内部站建设的前端运维方向以及会议预定团建组织对外品牌宣传的前端运营方向。 </li> <li class=“item”> 由于每个人的性格特质，成长经历的差异，自然适合的方向也不一样。感性细腻有设计背景可以专注于用户体验，纯逻辑工程化思维浓郁则更适合偏后开发，数学物理强悍可以考虑数据可视化方向，沟通协调能力很强可以朝着前端运营方向努力。 </li> <li class=“item”> 在学生时代，大家都很纯粹，我喜欢这个就学这个，例如，很多女生很喜欢CSS，写页面，做效果。但是，等她开始找工作，还是接触真实的行业圈子的时候，事情就发生了变化。 </li> </ul></body>使用margin负值有一个缺点，如图：底部边框不见了，因为被父元素的overflow: hidden;切割掉了。 ...

需求实现父 div 里面左右，上下动态分割 div，并上下改变父 div 的高度，并且宽和高都是按百分比（如图）。2. 实现原理2.1 父布局<div class=‘hj-wrap’> <div class=“arrow”></div> </div>首先一个父 div 为 hj-wrap，相对定位。一个改变父 div 高度的 arrow，用于上下拖动 , 不能占有位置，所以要绝对定位，并定位到最右下角。上下拖动的 arrow，当上拖动时，arrow 的父 div 的高度变小，当下拖动时，arrow 的父 div 的高度变大。2.2 横向布局<div class=‘hj-wrap’> <div class=“hj-transverse-split-div”> 横向 <label class=“hj-transverse-split-label”></label> </div> <div class=“hj-transverse-split-div”>横向 2 <label class=“hj-transverse-split-label”></label> </div> <div class=“hj-transverse-split-div”>横向 3 <label class=“hj-transverse-split-label”></label> </div> <div class=“hj-transverse-split-div”>横向 4 <label class=“hj-transverse-split-label”></label> </div> <div class=“hj-transverse-split-div”>横向 5 </div> <div class=“arrow”></div> </div>每一个横向的 div 为 hj-transverse-split-div 并相对定位，里面有一个拖动改变左右的 label 为 hj-transverse-split-label ，不能占有位置，所以要绝对定位，并定位到最右边并高为 100%，最后一个横向的 div 不用 hj-transverse-split-label 。拖动改变左右的 label 时，向左时，label 的父 div 的宽变小，label 的父 div 相邻的右边的 div 宽度变大。2.3 竖向布局<div class=‘hj-wrap verticals’> <div class=“hj-vertical-split-div”>上 <label class=“hj-vertical-split-label”></label> </div> <div class=“hj-vertical-split-div”>中 <label class=“hj-vertical-split-label”></label> </div> <div class=“hj-vertical-split-div”>下</div> <div class=“arrow”></div> </div>每一个横向的 div 为 hj-vertical-split-div 并相对定位，里面有一个拖动改变左右的 label 为 hj-vertical-split-label ，不能占有位置，所以要绝对定位，并定位到最下边并宽为 100%，最后一个竖向的 div 不用再放 hj-vertical-split-label 的 label 。拖动改变上下的 label 时，向上时，label 的父 div 的高度变小，label 的父 div 相邻的下边的 div 高度变大。3. js 实现代码：/** * name: split.js * author: biaochen * date: 2018-12-26 * /$(function() { //鼠标横向、竖向、和改变父高度的上下操作对象 var thisTransverseObject, thisVerticalObject, thisArrowObject; //文档对象 var doc = document; //横向分割栏 var transverseLabels = $(".hj-wrap").find(".hj-transverse-split-label"); //竖向分割栏 var verticalLabels = $(".hj-wrap").find(".hj-vertical-split-label"); // 改变父高度的箭头 div var parentArrow = $(".hj-wrap").find(".arrow"); // 设置宽 function setWidth(type) { if (type === “init”) { var length = $(".hj-wrap").length; if (length > 0) { for (var i = 0; i < length; i++) { var width = $($(".hj-wrap")[i])[0].offsetWidth; var hjDivNums = $($(".hj-wrap")[i]).children(".hj-transverse-split-div"); // var defaultWidth = Math.floor(100 / hjDivNums.length); var defaultWidth = Math.floor(width / hjDivNums.length); $($(".hj-wrap")[i]) .children(".hj-transverse-split-div") .width(defaultWidth + “px”); // .width(defaultWidth + “%”); } } } else { // 设置百分比 var transverseDivs = $(".hj-transverse-split-div") var widthLength = transverseDivs.length for (var i = 0; i < widthLength; i++) { var width = $(transverseDivs[i]).width(); var parentWidth = $(transverseDivs[i]) .parent() .width(); var rate = (width / parentWidth) * 100 + “%”; $(transverseDivs[i]).css({ width: rate }); } } } // 设置高 function setHeight(type) { if (type === “init”) { var verticalsParentDivs = $(".verticals"); var parentLengths = verticalsParentDivs.length; for (var i = 0; i < parentLengths; i++) { var parentHeight = $(verticalsParentDivs[i]).height(); var childrenNum = $(verticalsParentDivs[i]).children( “.hj-vertical-split-div” ).length; var defaultHeight = Math.floor(parentHeight / childrenNum); // var rate = Math.floor((height / parentHeight) 100) + ‘%’ var defaultHeight = Math.floor(100 / childrenNum); $(verticalsParentDivs[i]) .children(".hj-vertical-split-div") .height(defaultHeight + “%”); // .height(defaultHeight + “px”); } } else { // 设置百分比 var verticalsDivs = $(".hj-vertical-split-div"); var heightLength = verticalsDivs.length; for (var i = 0; i < heightLength; i++) { var height = $(verticalsDivs[i]).height(); var parentHeight = $(verticalsDivs[i]) .parent() .height(); var rate = (height / parentHeight) * 100 + “%”; $(verticalsDivs[i]).css({ height: rate }); } } } setWidth(‘init’) setHeight(“init”); //定义一个对象 function PointerObject() { this.el = null; //当前鼠标选择的对象 this.clickX = 0; //鼠标横向初始位置 this.clickY = 0; //鼠标竖向初始位置 this.transverseDragging = false; //判断鼠标可否横向拖动 this.verticalDragging = false; //判断鼠标可否竖向拖动 } //横向分隔栏绑定事件 transverseLabels.bind(“mousedown”, function(e) { thisTransverseObject = new PointerObject(); thisTransverseObject.transverseDragging = true; //鼠标可横向拖动 thisTransverseObject.el = this; thisTransverseObject.clickX = e.pageX; //记录鼠标横向初始位置 }); //竖向分隔栏绑定事件 verticalLabels.bind(“mousedown”, function(e) { //console.log(“mousedown”); thisVerticalObject = new PointerObject(); thisVerticalObject.verticalDragging = true; //鼠标可竖向拖动 thisVerticalObject.el = this; thisVerticalObject.clickY = e.pageY; //记录鼠标竖向初始位置 }); //上下绑定事件 parentArrow.bind(“mousedown”, function(e) { //console.log(“mousedown”); thisArrowObject = new PointerObject(); // thisArrowObject.transverseDragging = true; //鼠标可横向拖动 thisArrowObject.verticalDragging = true; //鼠标可竖向拖动 thisArrowObject.el = this; thisArrowObject.clickY = e.pageY; //记录鼠标竖向初始位置 }); doc.onmousemove = function(e) { //鼠标横向拖动 if (thisTransverseObject != null) { if (thisTransverseObject.transverseDragging) { var changeDistance = 0; if (thisTransverseObject.clickX >= e.pageX) { //鼠标向左移动 changeDistance = Number(thisTransverseObject.clickX) - Number(e.pageX); if ( $(thisTransverseObject.el) .parent() .width() - changeDistance < 20 ) {} else { $(thisTransverseObject.el) .parent() .width( $(thisTransverseObject.el) .parent() .width() - changeDistance ); $(thisTransverseObject.el) .parent() .next() .width( $(thisTransverseObject.el) .parent() .next() .width() + changeDistance ); thisTransverseObject.clickX = e.pageX; $(thisTransverseObject.el).offset({ left: e.pageX }); } } else { //鼠标向右移动 changeDistance = Number(e.pageX) - Number(thisTransverseObject.clickX); if ( $(thisTransverseObject.el) .parent() .next() .width() - changeDistance < 20 ) {} else { $(thisTransverseObject.el) .parent() .width( $(thisTransverseObject.el) .parent() .width() + changeDistance ); $(thisTransverseObject.el) .parent() .next() .width( $(thisTransverseObject.el) .parent() .next() .width() - changeDistance ); thisTransverseObject.clickX = e.pageX; $(thisTransverseObject.el).offset({ left: e.pageX }); } } $(thisTransverseObject.el).width(2); } } //鼠标竖向拖动 if (thisVerticalObject != null) { if (thisVerticalObject.verticalDragging) { var changeDistance = 0; if (thisVerticalObject.clickY >= e.pageY) { //鼠标向上移动 changeDistance = Number(thisVerticalObject.clickY) - Number(e.pageY); if ( $(thisVerticalObject.el) .parent() .height() - changeDistance < 20 ) {} else { $(thisVerticalObject.el) .parent() .height( $(thisVerticalObject.el) .parent() .height() - changeDistance ); $(thisVerticalObject.el) .parent() .next() .height( $(thisVerticalObject.el) .parent() .next() .height() + changeDistance ); thisVerticalObject.clickY = e.pageY; $(thisVerticalObject.el).offset({ top: e.pageY }); } } else { //鼠标向下移动 changeDistance = Number(e.pageY) - Number(thisVerticalObject.clickY); if ( $(thisVerticalObject.el) .parent() .next() .height() - changeDistance < 20 ) {} else { $(thisVerticalObject.el) .parent() .height( $(thisVerticalObject.el) .parent() .height() + changeDistance ); $(thisVerticalObject.el) .parent() .next() .height( $(thisVerticalObject.el) .parent() .next() .height() - changeDistance ); thisVerticalObject.clickY = e.pageY; $(thisVerticalObject.el).offset({ top: e.pageY }); } } $(thisVerticalObject.el).height(2); } } // 改变父的高度 if (thisArrowObject != null) { //鼠标竖向拖动 if (thisArrowObject.verticalDragging) { var changeDistance = 0; if (thisArrowObject.clickY >= e.pageY) { //鼠标向上移动 changeDistance = Number(thisArrowObject.clickY) - Number(e.pageY); if ( $(thisArrowObject.el) .parent() .height() - changeDistance < 50 ) {} else { $(thisArrowObject.el) .parent() .height( $(thisArrowObject.el) .parent() .height() - changeDistance ); thisArrowObject.clickY = e.pageY; $(thisArrowObject.el).offset({ bottom: e.pageY }); } } else { //鼠标向下移动 changeDistance = Number(e.pageY) - Number(thisArrowObject.clickY); $(thisArrowObject.el) .parent() .height( $(thisArrowObject.el) .parent() .height() + changeDistance ); thisArrowObject.clickY = e.pageY; $(thisArrowObject.el).offset({ bottom: e.pageY }); } $(thisArrowObject.el).height(10); } } }; $(doc).mouseup(function(e) { setHeight(“setHeight”); setWidth(“setWidth”); // 鼠标弹起时设置不能拖动 if (thisTransverseObject != null) { thisTransverseObject.transverseDragging = false; thisTransverseObject = null; } if (thisVerticalObject != null) { thisVerticalObject.verticalDragging = false; thisVerticalObject = null; } if (thisArrowObject != null) { thisArrowObject.verticalDragging = false; thisArrowObject = null; } e.cancelBubble = true; });});4. 完整代码与效果效果图：项目地址：https://github.com/biaochenxuying/split效果体验地址： https://biaochenxuying.github.io/split/index.html初始代码是从网上来的，不过网上的并不完整，父 div 的高也不能改变，并且孩子的宽高并不是百分比的，布局也并不合理，所以修改成这样子。5. 最后微信公众号：BiaoChenXuYing分享前端、后端开发等相关的技术文章，热点资源，随想随感，全栈程序员的成长之路。关注公众号并回复福利便免费送你视频资源，绝对干货。福利详情请点击：免费资源分享–Python、Java、Linux、Go、node、vue、react、javaScript

高度自适应

css多种方式实现等高布局

js 实现上下改变父 div 的高度，左右上下动态分割孩子的宽高