height:100%和height:auto到底有什麼差別？

一直不懂height:100%和height:auto的差別，最近在製作前端頁面時都用了height:100%;overflow:hidden; ，可是有些瀏覽器出現莫名的奇妙的問題，但換成height:auto就好了，百度過這個問題，卻一直沒有細看。

今天又浮現了同樣的問題，百度細看和群組裡的朋友指點，終於明白其中的道理，記錄一下。

height:auto，是指根據區塊內內容自動調整高度。
height:100%，是指其相對父塊高度而定義的高度，也就是按照離它最近且有定義高度的父層的高度來定義高度。

auto是隨內容的高度撐開的。 100%是根據父級元素的高度來決定的。例如：

<div style="height:100px;width:200px;">      <div style="height:auto;width:100px;float:left;">
这个容器的高度是随里面的内容的高度而定
</div>

<div style="height:100%;width:100px;float:right;">这个容器的高度为父级的高度，100px</div> </div>

例如一個表格在另一個表格裡面，如果外面的表格高是100，裡面表格當是auto的時候，如果表格裡面沒有東西，它就沒有高度，表格裡面的內容有多高，它就有多高，而當是100%的時候，無論裡面有沒有內容，它都和外面的表格是一樣高的

#

以上是height:100%和height:auto到底有什麼差別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！