當你設定乙個元素的高度為100%時，期望這樣元素能撐滿整個瀏覽器視窗的高度，但大對數情況下，這樣做法沒有任何效果，你知道為什麼height:100%不起作用嗎？
按常理，當我們用css的height屬性定義乙個元素的高度時，這個元素應該按照設定在瀏覽器的縱向空間裡擴充套件相應的空間距離。例如，如果乙個div元素的css是height: 100px;，那它應該在頁面的豎向空間裡佔滿100px的高度。
而跟w3c的規範，百分比的高度在設定時需要根據這個元素的父元素容器的高度。所以，如果你把乙個div的高度設定為height: 50%;，而它的父元素的高度是100px，那麼，這個div的高度應該是50px。
那麼為什麼height:100%不起作用？
當設計乙個頁面時，你在裡面放置了乙個div元素，你希望它佔滿整個視窗高度，最自然的做法，你會給這個div新增height: 100%;的css屬性。然而，如果你要是設定寬度為width: 100%;，那這個元素的寬度會立刻擴充套件到視窗的整個橫向寬度。高度也會這樣嗎？ ----不會
你需要理解瀏覽器是如何計算高度和寬度的。web瀏覽器在計算有效寬度時會考慮瀏覽器視窗的開啟寬度。如果你不給寬度設定任何預設值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。
但是高度的計算方式完全不一樣。事實上，瀏覽器根本就不計算內容的高度，除非內容超出了視窗範圍(導致滾動條出現)。或者你給整個頁面設定乙個絕對高度。否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。
因為頁面並沒有預設的高度值，所以，當你讓乙個元素的高度設定為百分比高度時，無法根據獲取父元素的高度，也就無法計算自己的高度。換句話說，父元素的高度只是乙個預設值：height: auto;。當你要求瀏覽器根據這樣乙個預設值來計算百分比高度時，只能得到undefined的結果。也就是乙個null值，瀏覽器不會對這個值有任何的反應。
若想要讓頁面的元素能夠實現高度的繼承，那麼可以在整個頁面所有元素的父元素即body，html中設定height屬性：
body這樣的初始化是必不可少的。若想要限制頁面顯示的部分僅為100%，那麼超出的部分不想顯示可以設定overflow屬性值為hidden。
響應式頁面的坑
以此來記錄錯誤以及注意點 防止以後再出現同樣的錯誤 1.當乙個div標籤裡面包含多個p標籤時 p標籤會溢位 這時應該在div標籤上加上css的height auto 屬性 2.屬性的max width定義為不縮放 維持本身大小 響應式是盡量放乙個符合需求大小的 3.0 important是為提高優先...
前端頁面響應式布局 簡單實現
找到了個 寫的就是這個響應式布局的 複製貼上到css 檔案 就能實現等比例縮放功能 下面是 裡面的範例之一 當瀏覽器的可視區域小於980px media screen and max width 980px content sidebar footer 當瀏覽器的可視區域小於650px media ...
HTML頁面響應式布局
同一套頁面可以相容不同解析度的裝置。實現 依賴於柵格系統 將一行平均分成12個格仔，可以指定元素佔幾個格仔 步驟 1.定義容器。相當於之前的table 容器分類 1.container 兩邊留白 2.container fluid 每一種裝置都是100 寬度 2.定義行。相當於之前的tr 樣式 ro...