CSS 如何操作height:100%;使其發揮作用-css教學-PHP中文網

首頁

web前端

css教學

CSS 如何操作height:100%;使其發揮作用

巴扎黑

Jun 28, 2017 am 10:02 AM

100%height

當你設定一個頁面元素的高度(height)為100%時，期望這樣元素能撐滿整個瀏覽器視窗的高度，但大多數情況下，這樣的做法沒有任何效果。你知道為什麼height:100%不起作用嗎？

依照常理，當我們用CSS的height屬性定義一個元素的高度時，這個元素應該按照設定在瀏覽器的縱向空間裡擴展對應的空間距離。例如，如果一個p元素的CSS是height: 100px;，那它應該在頁面的垂直空間裡佔滿100px的高度。

而跟W3C的規範，百分比的高度在設定時需要根據這個元素的父元素容器的高度。所以，如果你把一個p的高度設定為height: 50%;，而它的父元素的高度是100px，那麼，這個p的高度應該是50px。

那為什麼height:100%; 不起作用

當設計一個頁面時，你在裡面放置了一個p元素，你希望它佔滿整個視窗高度，最自然的做法，你會給這個p加上height: 100%;的css屬性。然而，如果你要是設定寬度為<a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>: 100%;，那這個元素的寬度會立刻擴展到視窗的整個橫向寬度。高度也會這樣嗎？

錯。

為了理解為什麼不會，你需要理解瀏覽器是如何計算高度和寬度的。 Web瀏覽器在計算有效寬度時會考慮瀏覽器視窗的開啟寬度。如果你不給寬度設定任何缺省值，那麼瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。

但是高度的計算方式完全不一樣。事實上，瀏覽器根本就不計算內容的高度，除非內容超出了視窗範圍(導致捲軸出現)。或者你給整個頁面設定一個絕對高度。否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就不需要考慮。

因為頁面並沒有缺省的高度值，所以，當你讓一個元素的高度設定為百分比高度時，無法根據取得父元素的高度，也就無法計算自己的高度。換句話說，父元素的高度只是一個預設值：height: auto;。當你要求瀏覽器根據這樣一個缺省值來計算百分比高度時，只能得到undefined的結果。也就是一個null值，瀏覽器不會對這個值有任何的反應。

上面的示範範例是父元素沒有設定固定高度，於是子元素的高度height: 100% 也不會起作用。你可以根據父元素的背景色來判斷子元素的高度不是100%。

那麼，如果想讓一個元素的百分比高度height: 100%;起作用，你需要為這個元素的所有父元素的高度設定一個有效值。換句話說，你需要這樣做：

<html>
  <body>
    <p style="height: 100%;">
      <p>
        想让这个p高度为 100% 。      </p>
    </p>
  </body></html>

現在你給了這個p的高度是100%，它有兩個父元素和。為了讓你的p的百分比高度運作，你必須設定和的高度。

<html style="height: 100%;">
  <body style="height: 100%;">
    <p style="height: 100%;">
      <p>
        这样这个p的高度就会100%了      </p>
    </p>
  </body></html>

從這個示範你可以看出，height: 100%;起作用了。

在使用`height: 100%;`時需要注意的一些事項

1、Margins 和 padding 會讓你的頁面出現捲軸，也許這是你不希望的。

2、如果你的元素實際高度大於你設定的百分比高度，那麼元素的高度會自動擴展。

以上是CSS 如何操作height:100%;使其發揮作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

@KeyFrames vs CSS過渡：有什麼區別？May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用頁面CMS進行靜態站點內容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的內容管理系統選項可用，而我進行了幾個測試，但實際上沒有一個是一個，y＆＃039;知道嗎？怪異的定價模型，艱難的自定義，有些甚至最終成為整個＆

鏈接HTML中CSS文件的最終指南May 13, 2025 am 12:02 AM

鏈接CSS文件到HTML可以通過在HTML的部分使用元素實現。 1)使用標籤鏈接本地CSS文件。 2)多個CSS文件可通過添加多個標籤實現。 3)外部CSS文件使用絕對URL鏈接，如。 4)確保正確使用文件路徑和CSS文件加載順序，優化性能可使用CSS預處理器合併文件。

CSS Flexbox與網格：全面評論May 12, 2025 am 12:01 AM

選擇Flexbox還是Grid取決於佈局需求：1)Flexbox適用於一維佈局，如導航欄；2)Grid適合二維佈局，如雜誌式佈局。兩者在項目中可結合使用，提升佈局效果。

如何包括CSS文件：方法和最佳實踐May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用標籤在HTML的部分引入外部CSS文件。 1.使用標籤引入外部CSS文件，如。 2.對於小型調整，可以使用內聯CSS，但應謹慎使用。 3.大型項目可使用CSS預處理器如Sass或Less，通過@import導入其他CSS文件。 4.為了性能，應合併CSS文件並使用CDN，同時使用工具如CSSNano進行壓縮。

Flexbox vs Grid：我應該學習兩者嗎？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

軌道力學（或我如何優化CSS KeyFrames動畫）May 09, 2025 am 09:57 AM

重構自己的代碼看起來是什麼樣的？約翰·瑞亞（John Rhea）挑選了他寫的一個舊的CSS動畫，並介紹了優化它的思維過程。

CSS動畫：很難創建它們嗎？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

See all articles