CSS百分比定義高度的冷知識

2021-09-26 09:17:02 字數 1074 閱讀 3143

當我們給塊級元素設定響應式高度的時候，例如給div設定height=50%，往往沒能看到效果。

原因是百分比的大小是相對其父級元素寬高的大小，如最外層元素設定的百分比是對應螢幕而言的。

需要了解的是對於寬度來說，其父級元素無須確定寬度就能設定百分比，例如我們可以利用這個特性給未知寬度的塊級元素設定水平居中效果：

父元素css：

position: relative/absolute;    left: 50%;
子元素css：

position: relative;    left: -50%;
但高度則不同，若某元素的父元素沒有確定高度，則無法有效使用height=xx%的樣式，我們可以這樣解決（假設最外層的div需要設定百分比高度樣式）：

html, body  


.outdiv
不過這裡有個需要注意的，若div裡的內容超出了div的高度，在ie7+的瀏覽器是無法將div撐起來的（ie6則可以），如果要顧及這一點，可以使用min-height解決（當然也要考慮ie6不支援min-height的問題）：

tml, body  


.outdiv 


html .outdiv
有些時候，如果僅僅設定 html,body 可能會導致html或者body的高度僅僅為瀏覽器可視區域高度，而非頁面可視區域高度。如果你寫模態視窗特效遇到這種問題肯定是很煩人（比如新增遮住一切的黑色半透明div，其高度沒法設為頁面可視區域高度），解決方法依舊是使用min-height來替代（當然如果你沒有遇到bug，可以忽視這一段）：

html,body
但是這樣僅僅能確保html或者body中至少有乙個的高度是頁面可視區域高度，chrome和ie是反過來的，前者通過html可以獲取我們想要的高度，後者得通過body來獲取，解決方法如下

//獲取頁面可視區域高度復用

$.vj_getbh = function()

CSS百分比定義高度的冷知識

當我們給塊級元素設定響應式高度的時候，例如給div設定height 50 往往沒能看到效果。原因是百分比的大小是相對其父級元素寬高的大小，如最外層元素設定的百分比是對應螢幕而言的。需要了解的是對於寬度來說，其父級元素無須確定寬度就能設定百分比，例如我們可以利用這個特性給未知寬度的塊級元素設定水平居中...

div高度百分比

在用百分比的時候，一定要確定父親節點的高度 寬度是同樣的道理 比如 如果給div2設定height 100 那麼必須明確div1的高度，否則div2的100 就無法確定，如果要充滿整個瀏覽器視窗，那麼就要設定所有的長輩節點都為100 比如 如果想讓div2設定100 達到充滿整個瀏覽器視窗的效果，必...

css百分比定位和百分比尺寸

只有設定了定位的 relative,absolute,fixed 的元素才有left,top等屬性。子元素relative定位 百分比定位和百分比尺寸都是相對于父元素，無論父元素有沒有定位 子元素absolute定位 百分比定位和百分比尺寸都是相對於最近的定位了的祖先元素，如果沒有則相對於視窗。可以...