在CSS中，設(shè)置元素的高度（height）是一項(xiàng)基本的樣式設(shè)置。通常情況下，我們可以很輕松地使用height屬性來定義元素的高度值。但是，有時(shí)候我們會(huì)遇到一些需要hack的情況。下面就來講一講關(guān)于CSS中height的hack技巧。

/*設(shè)置元素高度為父元素的50%*/
.child{
height: 50%;
}
/*hack方法1：采用絕對定位*/
.child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
min-height: 50%;
}
/*hack方法2：采用padding*/
.parent{
height: 100px;
padding-top: 50%;
}
.child{
height: auto;
position: relative;
top: -50%;
}

針對第一個(gè)hack方法，可以很容易地理解：通過設(shè)置絕對定位和相對定位來實(shí)現(xiàn)高度百分比的設(shè)置。其中，絕對定位的left、right、top、bottom值都等于0，也就是將元素定位于父元素的左上角，當(dāng)元素高度小于父元素高度的50%時(shí)，會(huì)自動(dòng)填充父元素剩余的50%高度。此方法的缺點(diǎn)是，容易引起父元素的高度計(jì)算錯(cuò)誤，可能會(huì)影響其他元素的布局。

而第二個(gè)hack方法，則是通過設(shè)置父元素的padding-top值為50%，然后通過向上定位子元素的高度為它的50%來實(shí)現(xiàn)高度百分比的設(shè)置。這種方法的好處是比較穩(wěn)定，適用于絕大多數(shù)情況。缺點(diǎn)是容易引起子元素內(nèi)容溢出問題，需要額外處理。