浅析CSS等高布局的6种方式

互联网
正直为人，诚信待人，爱岗敬业，尽心竭力。一个人的梦想也许不值钱，但一个人的发奋很值钱。早上好！

前面的话

等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高，伪等高只是看上去等高而已，真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及table实现、absolute实现、flex实现和js判断这四种真等高布局

伪等高

边框模拟　　

因为元素边框和元素高度始终是相同高度，用元素的边框颜色来伪装左右两个兄弟元素的背景色。然后将左右两个透明背景的元素使用absolute覆盖在中间元素的左右边框上，实现视觉上的等高效果

[注意]左右两侧元素高度不能大于中间元素高度，否则无法撑开容器高度

CSS Code复制内容到剪贴板
  1. <style>
  2. body,p{margin:0;}
  3. .parent{
  4. position:relative;
  5. }
  6. .center{
  7. box-sizing:border-box;
  8. padding:020px;
  9. background-clip:content-box;
  10. border-left:210pxsolidlightblue;
  11. border-right:310pxsolidlightgreen;
  12. }
  13. .left{
  14. position:absolute;
  15. top:0;
  16. left:0;
  17. width:200px;
  18. }
  19. .rightright{
  20. position:absolute;
  21. top:0;
  22. rightright:0;
  23. width:300px;
  24. }
  25. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="parent"style="background-color:lightgrey;">
  2. <divclass="left">
  3. <p>left</p>
  4. </div>
  5. <divclass="center"style="background-color:pink;">
  6. <p>center</p>
  7. <p>center</p>
  8. </div>
  9. <divclass="right">
  10. <p>right</p>
  11. </div>
  12. </div>

负margin　　

因为背景是在padding区域显示的，设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom，使背景色铺满元素区域，又符合元素的盒模型的计算公式，实现视觉上的等高效果

[注意]如果页面中使用<a>锚点跳转时，将会隐藏部分文字信息

[注意]如果页面中的背景图片定位到底部，将会看不到背景图片

CSS Code复制内容到剪贴板
  1. <style>
  2. body,p{margin:0;}
  3. .parent{
  4. overflow:hidden;
  5. }
  6. .left,.centerWrap,.rightright{
  7. float:left;
  8. width:50%;
  9. padding-bottom:9999px;
  10. margin-bottom:-9999px;
  11. }
  12. .center{
  13. margin:020px;
  14. }
  15. .left,.rightright{
  16. width:25%;
  17. }
  18. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="parent"style="background-color:lightgrey;">
  2. <divclass="left"style="background-color:lightblue;">
  3. <p>left</p>
  4. </div>
  5. <divclass="centerWrap">
  6. <divclass="center"style="background-color:pink;">
  7. <p>center</p>
  8. <p>center</p>
  9. </div>
  10. </div>
  12. <divclass="right"style="background-color:lightgreen;">
  13. <p>right</p>
  14. </div>
  15. </div>

真等高

table　　

table元素中的table-cell元素默认就是等高的

CSS Code复制内容到剪贴板
  1. <style>
  2. body,p{margin:0;}
  3. .parent{
  4. display:table;
  5. width:100%;
  6. table-layout:fixed;
  7. }
  8. .left,.centerWrap,.rightright{
  9. display:table-cell;
  10. }
  11. .center{
  12. margin:020px;
  13. }
  14. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="parent"style="background-color:lightgrey;">
  2. <divclass="left"style="background-color:lightblue;">
  3. <p>left</p>
  4. </div>
  5. <divclass="centerWrap">
  6. <divclass="center"style="background-color:pink;">
  7. <p>center</p>
  8. <p>center</p>
  9. </div>
  10. </div>
  11. <divclass="right"style="background-color:lightgreen;">
  12. <p>right</p>
  13. </div>
  14. </div>

absolute　　

设置子元素的top:0;bottom:0;使得所有子元素的高度都和父元素的高度相同，实现等高效果

CSS Code复制内容到剪贴板
  1. <style>
  2. body,p{margin:0;}
  3. .parent{
  4. position:relative;
  5. height:40px;
  6. }
  7. .left,.center,.rightright{
  8. position:absolute;
  9. top:0;
  10. bottombottom:0;
  11. }
  12. .left{
  13. left:0;
  14. width:100px;
  15. }
  16. .center{
  17. left:120px;
  18. rightright:120px;
  19. }
  20. .rightright{
  21. width:100px;
  22. rightright:0;
  23. }
  24. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="parent"style="background-color:lightgrey;">
  2. <divclass="left"style="background-color:lightblue;">
  3. <p>left</p>
  4. </div>
  5. <divclass="center"style="background-color:pink;">
  6. <p>center</p>
  7. <p>center</p>
  8. </div>
  9. <divclass="right"style="background-color:lightgreen;">
  10. <p>right</p>
  11. </div>
  12. </div>

flex　　

flex中的伸缩项目默认都拉伸为父元素的高度，也实现了等高效果

CSS Code复制内容到剪贴板
  1. <style>
  2. body,p{margin:0;}
  3. .parent{
  4. display:flex;
  5. }
  6. .left,.center,.rightright{
  7. flex:1;
  8. }
  9. .center{
  10. margin:020px;
  11. }
  12. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="parent"style="background-color:lightgrey;">
  2. <divclass="left"style="background-color:lightblue;">
  3. <p>left</p>
  4. </div>
  5. <divclass="center"style="background-color:pink;">
  6. <p>center</p>
  7. <p>center</p>
  8. </div>
  9. <divclass="right"style="background-color:lightgreen;">
  10. <p>right</p>
  11. </div>
  12. </div>

js　　

当子元素高度不同时，进行js判断，增加较低子元素的padding-bottom，使得各个子元素实现等高效果

CSS Code复制内容到剪贴板
  1. <style>
  2. body,p{margin:0;}
  3. .parent{overflow:hidden;}
  4. .left,.center,.rightright{
  5. float:left;
  6. width:25%;
  7. }
  8. .center{
  9. width:50%;
  10. padding:020px;
  11. background-clip:content-box;
  12. box-sizing:border-box;
  13. }
  14. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="parent"id="parent"style="background-color:lightgrey;">
  2. <divclass="left"style="background-color:lightblue;">
  3. <p>left</p>
  4. </div>
  5. <divclass="center"style="background-color:pink;">
  6. <p>center</p>
  7. <p>center</p>
  8. </div>
  9. <divclass="right"style="background-color:lightgreen;">
  10. <p>right</p>
  11. </div>
  12. </div>
JavaScript Code复制内容到剪贴板
  1. <script>
  2. functiongetCSS(obj,style){
  3. if(window.getComputedStyle){
  4. returngetComputedStyle(obj)[style];
  5. }
  6. returnobj.currentStyle[style];
  7. }
  8. varoParent=document.getElementById('parent');
  9. varoLeft=oParent.getElementsByTagName('div')[0];
  10. varoCenter=oParent.getElementsByTagName('div')[1];
  11. varoRight=oParent.getElementsByTagName('div')[2];
  12. functioneqHeight(obj1,obj2){
  13. varoDis=obj1.clientHeight-obj2.clientHeight;
  14. if(oDis>0){
  15. obj2.style.paddingBottom=parseFloat(getCSS(obj2,'padding-bottom'))+oDis+'px';
  16. }else{
  17. obj1.style.paddingBottom=parseFloat(getCSS(obj1,'padding-bottom'))+Math.abs(oDis)+'px';
  18. }
  19. }
  20. eqHeight(oLeft,oCenter);
  21. eqHeight(oLeft,oRight);
  22. </script>

以上这篇浅析CSS等高布局的6种方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/xiaohuochai/archive/2016/05/04/5457127.html

您可能有感兴趣的文章
css等高布局常用几种方式
css多种方式如何实现等高布局的示例代码
css设置多列等高布局的方法示例
前端应该掌握的CSS如何实现多列等高布局技巧
如何利用margin如何实现等高布局