css 設定body的最小高度是100 ,滿屏顯示

2021-09-11 04:09:28 字數 959 閱讀 1134

解決問題:

1.body裡的內容不滿一屏時,body的高度滿屏;

2.當內容超出螢幕高度時,內容的高度就是body的高度。

方法一:沒有設定body的高度,內容不滿屏,但是背景色卻鋪滿整個螢幕,方法如下:

html {} // html不設定背景色

body

*注:可是為什麼我們在寫專案的時候,卻並沒有達到這個效果,而是內容多高,body背景就是多高呢?

細心發現,html設定了乙個背景色。

可是為什麼html設定了背景色,body的滿屏背景色卻失效了呢?我猜測這可能是和瀏覽器的機制有關,瀏覽器會先找html有沒有背景色,如果沒有則往下查詢body的,如果body有則取它來做底板的顏色。

方法二:

html, body
*注:如果內容沒有超過螢幕的高度,是沒有任何問題, 但是當內容高度大於螢幕高度時,body的高度被寫死,高度和螢幕高度相等,並沒有滿足我們的需求;效果如圖:

方法二:

在視覺上,這個方法是可以實現我們的需求的。

可是細心的會發現,如果內容超過一螢幕,滾動條向下滾動的時候,html的高度只有一螢幕的高度

方法三:

html, body
可以實現,但是html,和body的高度是螢幕的高度

css怎麼設定最大高度和最小高度

檢舉 2011 5 26 16 34 提問者 web187 懸賞分 5 瀏覽次數 3027次 檢舉 2011 5 26 16 50 最佳答案 1 ie6支援max height解決方法 ie6支援最大高度解決css yangshi 說明 max height 1000px 這個是ie6以上級其它品牌...

css 高度自適應的問題 body高度問題

css 高度自適應的問題 物件height 100 並不能直接產生效果,是因為跟其父物件有關。center 上面的css樣式是無效的,不會產生任何效果。需要改寫 html,body center 對 center物件設定了height 100 同時設定了html與body的height 100 這就...

css設定最小高度 然後自適應

看 先 min height 400px 解決ie8.9.ff.chrome height 100 解決ie7 height 400px 解決ie6 ie6超出自動溢位 都有注釋,只為了大家能看的更清晰更明白,因為有寫同學不太了解hack的處理方式。下面是無注釋版,複製就能用的 min height...