CSS等高布局的6種方式介紹

下面小編就為大家帶來一篇CSS等高布局的6種方式介紹。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前面的話

等高布局是指子項目在父元素中高度相等的布局方式。等高布局的實現包括偽等高和真等高，偽等高只是看上去等高而已，真等高是實實在在的等高。本文將介紹邊框類比、負margin這兩種偽等高以及table實現、absolute實現、flex實現和js判斷這四種真等高布局

偽等高

邊框類比　　

因為元素邊框和元素高度始終是相同高度，用元素的邊框顏色來偽裝左右兩個兄弟元素的背景色。然後將左右兩個透明背景的元素使用absolute覆蓋在中間元素的左右邊框上，實現視覺上的等高效果

[注意]左右兩側元素高度不能大於中間元素高度，否則無法撐開容器高度

CSS Code複製內容到剪貼簿

<style>   body,p{margin: 0;}   .parent{       position: relative;   }   .center{       box-sizing:border-box;       padding: 0 20px;       background-clip: content-box;       border-left: 210px solid lightblue;       border-right: 310px solid lightgreen;   }   .left{       position: absolute;       top: 0;       left: 0;       width: 200px;   }   .rightright{       position: absolute;       top: 0;       rightright: 0;       width: 300px;   }   </style>

XML/HTML Code複製內容到剪貼簿

<p class="parent" style="background-color: lightgrey;">    <p class="left">        <p>left</p>    </p>    <p class="center" style="background-color: pink;">        <p>center</p>        <p>center</p>    </p>    <p class="right">        <p>right</p>    </p></p>

負margin　　

因為背景是在padding地區顯示的，設定一個大數值的padding-bottom，再設定相同數值的負的margin-bottom，使背景色鋪滿元素地區，又符合元素的盒模型的計算公式，實現視覺上的等高效果

[注意]如果頁面中使用<a>錨點跳轉時，將會隱藏部分文字資訊

[注意]如果頁面中的背景圖片定位到底部，將會看不到背景圖片

CSS Code複製內容到剪貼簿

<style>   body,p{margin: 0;}   .parent{       overflow: hidden;   }   .left,.centerWrap,.rightright{       float: left;       width: 50%;       padding-bottom: 9999px;       margin-bottom: -9999px;   }   .center{       margin: 0 20px;   }   .left,.rightright{       width: 25%;   }   </style>

XML/HTML Code複製內容到剪貼簿

<p class="parent" style="background-color: lightgrey;">    <p class="left" style="background-color: lightblue;">        <p>left</p>    </p>    <p class="centerWrap">        <p class="center" style="background-color: pink;">            <p>center</p>            <p>center</p>        </p>    </p>    <p class="right" style="background-color: lightgreen;">        <p>right</p>    </p></p>

真等高

table　　

table元素中的table-cell元素預設就是等高的

CSS Code複製內容到剪貼簿

<style>   body,p{margin: 0;}   .parent{       display: table;       width: 100%;       table-layout: fixed;   }   .left,.centerWrap,.rightright{       display: table-cell;   }   .center{       margin: 0 20px;   }   </style>

XML/HTML Code複製內容到剪貼簿

<p class="parent" style="background-color: lightgrey;">    <p class="left" style="background-color: lightblue;">        <p>left</p>    </p>    <p class="centerWrap">        <p class="center" style="background-color: pink;">            <p>center</p>            <p>center</p>        </p>    </p>    <p class="right" style="background-color: lightgreen;">        <p>right</p>    </p></p>

absolute　　

設定子項目的top:0;bottom:0;使得所有子項目的高度都和父元素的高度相同，實現等高效果

CSS Code複製內容到剪貼簿

<style>   body,p{margin: 0;}   .parent{       position: relative;       height: 40px;   }   .left,.center,.rightright{       position: absolute;       top: 0;       bottombottom: 0;   }   .left{       left: 0;       width: 100px;   }   .center{       left: 120px;       rightright: 120px;   }   .rightright{       width: 100px;       rightright: 0;   }   </style>

XML/HTML Code複製內容到剪貼簿

<p class="parent" style="background-color: lightgrey;">    <p class="left" style="background-color: lightblue;">        <p>left</p>    </p>    <p class="center" style="background-color: pink;">        <p>center</p>        <p>center</p>    </p>    <p class="right" style="background-color: lightgreen;">        <p>right</p>    </p></p>

flex　　

flex中的伸縮項目預設都展開為父元素的高度，也實現了等高效果

CSS Code複製內容到剪貼簿

<style>   body,p{margin: 0;}   .parent{       display: flex;   }   .left,.center,.rightright{       flex: 1;   }   .center{       margin: 0 20px;   }   </style>

XML/HTML Code複製內容到剪貼簿

<p class="parent" style="background-color: lightgrey;">    <p class="left" style="background-color: lightblue;">        <p>left</p>    </p>    <p class="center" style="background-color: pink;">        <p>center</p>        <p>center</p>    </p>    <p class="right" style="background-color: lightgreen;">        <p>right</p>    </p></p>

js　　

當子項目高度不同時，進行js判斷，增加較低子項目的padding-bottom，使得各個子項目實現等高效果

CSS Code複製內容到剪貼簿

<style>   body,p{margin: 0;}   .parent{overflow: hidden;}   .left,.center,.rightright{       float: left;       width: 25%;   }       .center{       width: 50%;       padding: 0 20px;       background-clip: content-box;       box-sizing: border-box;   }   </style>

XML/HTML Code複製內容到剪貼簿

<p class="parent" id="parent" style="background-color: lightgrey;">    <p class="left" style="background-color: lightblue;">        <p>left</p>    </p>    <p class="center" style="background-color: pink;">        <p>center</p>        <p>center</p>    </p>    <p class="right" style="background-color: lightgreen;">        <p>right</p>    </p></p>

JavaScript Code複製內容到剪貼簿

<script>   function getCSS(obj,style){       if(window.getComputedStyle){           return getComputedStyle(obj)[style];       }       return obj.currentStyle[style];   }   var oParent = document.getElementById('parent');   var oLeft = oParent.getElementsByTagName('p')[0];   var oCenter = oParent.getElementsByTagName('p')[1];   var oRight = oParent.getElementsByTagName('p')[2];   function eqHeight(obj1,obj2){       var oDis = obj1.clientHeight - obj2.clientHeight;       if(oDis > 0){           obj2.style.paddingBottom = parseFloat(getCSS(obj2,'padding-bottom')) + oDis + 'px';       }else{           obj1.style.paddingBottom = parseFloat(getCSS(obj1,'padding-bottom')) +  Math.abs(oDis) + 'px';       }   }   eqHeight(oLeft,oCenter);   eqHeight(oLeft,oRight);   </script>

以上這篇淺析CSS等高布局的6種方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援topic.alibabacloud.com。