又到了利用碎片學習的時間了，看看這個小案例，超級實用的一個css技巧:css實現兩欄等高布局。

樣式方面：

<style>

#box{

width:900px;

font-size:28px;

line-height:300px;

text-align:center;

border:2px solid #000;

margin:10px auto;

background:#999;

overflow: hidden;

}

.left{

width:400px;

height:300px;

float:left;

background:#ccc;

margin-bottom:-1000px;

padding-bottom:1000px;

}

.right{

width:500px;

float:right;

background:#0F3;

margin-bottom:-1000px;

padding-bottom:1000px;

}

</style>

布局方面：

<div id="box">

<div class="left">

左邊高度設為 height:500px;

</div>

<div class="right">

右邊高度不用設置，自動實現等高

</div>

</div>

這樣就可以實現兩欄等高布局啦，效果如下

要點1：父容器設置超出隱藏：overflow:hidden;

要點2：子容器設置padding-bottom:1000px;一個足夠大的值。然后再設置一個margin-bottom的值和padding-bottom相等的負值 ，相抵消。

這種方法稱之為padding補償法。當其中一列的高度增高時，總的高度就會隨之增高。因為背景是可以用在padding占用的空間里的，而且邊框也是跟隨padding變化的，所以就成功的完成了一個障眼法。

前端愛好者們約定，閱讀后：

if（‘覺得有用’）

｛

分享給朋友（‘I get it！’）;

｝

else if（‘已了解’）

｛

分享給朋友（‘a piece of cake！’）;

｝

else if('看不懂')

{

回復小編（'help me!'）;

}

總結

以上是生活随笔為你收集整理的css实用技巧：巧用css实现两栏等高布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。