html body元素的高度問題

2021-09-12 14:39:12 字數 829 閱讀 2676

問題:  為什麼要設定   html,body  ?

首先看一段**

一般來說mydiv的高度應該為瀏覽器的30%,我們在chrome中審查元素檢視

html  body div 的高度都為0

這裡說一下  ,啟用標準模式,標準模式下的html、body元素的高度均為0。

我們都知道,乙個塊級元素沒有主動為其分配高度和寬度的時候,瀏覽器會預設為其分配最大寬度,但是不負責高度的分配,

沒有設定高度時,高度是由子元素堆砌起來的,那麼html 和body的高度也是由子元素堆砌起來的

另外,元素高度設定為百分比需要向上遍歷父元素找到乙個定值高度才能起作用,如果中途有個height為auto或者沒有設定高度,那麼設定百分比高度就不起作用了

從上面的html**可以看出,div的父元素是body,body的父元素是html,通過height:100%層層向上,找到頂級獲取定高。

/* 設定html的height:100%,就可以獲取瀏覽器的定高 */

html,body

未設定,預設啟用怪異模式,怪異模式下,瀏覽器按照自己的方式解析渲染頁面,在不同的瀏覽器就會顯示不同的樣式

下面**沒有設定,html、body元素的高度即為視窗的高度

html body元素的高度問題

首先 html元素和body元素均為塊級元素。簡述 有時我們會發現未設定height 100 html body元素的高度卻為當前視窗的高度,看上去像是設定了height 100 看下面兩個例子 例1 此時的container的高度為視窗高度的30 html body元素的高度均為視窗的高度。例2 ...

CSS 元素的高度,元素高度自適應螢幕高度

元素的高度預設是auto,被內容自動撐開 100 使得html的height與螢幕的高度相等 50 使得html的height等於螢幕的一半 若想讓乙個的高度與螢幕高度自適應,始終充滿螢幕,需要從html層開始層層新增height 100 元素沒有 margin和padding 元素有margin ...

vue 動態寫元素高度的問題

vue如何設定動態寬度高度或者動態樣式 新增樣式繫結 新增屬性計算 在開發過程中,很多時候都會用到動態的計算的樣式,比如寬度,高度。特別是開發後台管理系統。那麼首先你務必看vue的官方文件。涉及到的基礎知識有 需求場景 獲取當前手機螢幕高度,設定container div的可滾動區域範圍。新增樣式繫...