首頁  >  文章  >  web前端  >  height:100%和height:auto到底有什麼差別?

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

零下一度
零下一度原創
2017-06-30 16:29:4316765瀏覽

一直不懂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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn