相對于父元素的高度根據百分比計算高度。如果父元素沒有設定高度或者父元素高度百分比不生效,則無法計算自己的高度。當沒有給父元素設定高度或父元素高度百分比不生效時,父元素高度由子元素高度決定。
html 的父元素可以理解成 window,瀏覽器會將 html 填充完整個瀏覽器視窗:
當 html 高度設定為具體畫素值或百分比時:
但是 html 的子元素高度設定成百分比時,會按照 html 實際設定的高度值來計算百分比。
>
html
body
.parent
style
>
class
="parent"
>
div>
效果:
將 html 高度設定為 200px ,效果如下:
當 html 高度大於瀏覽器視窗高度時,會出現滾動條:
>
html
body
.parent
style
>
class
="parent"
>
div>
效果:
如果父元素沒有設定高度或者父元素高度百分比沒有生效,那麼子元素的高度百分比不會生效:
>
body
.parent
style
>
class
="parent"
>
html 沒有設定高度div
>
這裡沒有 html 高度,因此 body 的高度規則跟 html 類似,但是這裡的 body 實際高度為 0,所以 parent 的高度百分比不生效,其高度由子元素決定。
效果:參考:理解 height 百分比
css百分比定位和百分比尺寸
只有設定了定位的 relative,absolute,fixed 的元素才有left,top等屬性。子元素relative定位 百分比定位和百分比尺寸都是相對于父元素,無論父元素有沒有定位 子元素absolute定位 百分比定位和百分比尺寸都是相對於最近的定位了的祖先元素,如果沒有則相對於視窗。可以...
百分比布局
參考位址 螢幕的適配是我們android開發最經常做的事情之一,我們一直指望著能夠一套布局適配所有。於是在android5.0之後,提供了android support percent lib,這樣我們可以盡情的使用。使用的時候,我們嗯需要設定的有 layout marginpercent layo...
百分比布局
其中相對布局和幀布局官方是有支援庫的 compile com.android.support percent 25.3.0 但線性布局並沒有 public class percentlinearlayout extends linearlayout override protected void o...