為什么高度（100％）和寬度（100％）不起作用？
[英]why doesn't height: 100% and width: 100% work?
問題描述
挫折
我很沮喪，不得不一次又一次地搜索互聯網，以找到一種方法來獲取一個簡單的網頁來填滿任何設備上的整個屏幕。 我不在乎分辨率，文本大小，文本是否在屏幕內或其他任何內容。 我什么都不在乎 我要顯示一個字，它應該垂直和水平出現在屏幕中間。
CSS使我發瘋。 我不明白為什么這並不簡單。 和自舉。 好，非常感謝你們，你們對我幫助很大！ 但是，為什么沒有一個只占用屏幕上所有可見空間的類呢？
我嘗試了很多變體，但都無濟於事。 我只是無法把這個詞帶到屏幕的中心。
一些變化
最簡單的一個： http : //jsfiddle.net/IcyFlame/ngVSd/
<div style="height: 100%; width: 100%; text-align: center; vertical-align: middle;">Word</div>
我不知道為什么這行不通。 我想回答為什么這不起作用。 更重要的是，如果您只是告訴我如何使其工作，我將非常喜歡它。 隨時隨地。
這是一個非常有用的問題： 設置高度：我的標簽元素上的高度100％不起作用
給出答案的人說，這是答案的100％。 真的很酷。 以及如何解決整體問題？ 哦，不，我剛剛回答了問題。
之后的所有問題都被標記為重復。 其中之一是：
盡管問題完全不同，但是主持人只是認為這是重復的並且被標記為一個。
注意：我適合許多屏幕尺寸。 我不想在最終代碼中的任何地方寫任何類型的絕對像素高度和寬度。
請幫我解決這個問題
參考：我希望這個詞能在這個gorgeours網站上出現在中間：
注意，這只是參考。 我不想有背景圖片。 網頁的整個標題部分占據了整個屏幕，這就是我想要實現的。
一切都集中而美麗。 那就是我想去的地方。
4 個解決方案
解決方案1
1 2014-04-16 13:34:59
老實說，我不太了解Vertical-align在做什么。 因此，我無法真正解釋您的示例在哪里失敗。 但是，如果您不關心與IE7和更小的IE7的兼容性，則可以使用“ display：table”選項：
<div style="display: table; width: 100%; height: 100%; text-align: center">
<div style="display: table-cell; vertical-align: middle;">Word</div>
</div>
希望能有所幫助。
解決方案2
1 已采納 2014-04-17 09:58:04
要獲得垂直對齊，您必須在第一個100％尺寸的div內有一個div。
近似居中（適合少量文本）很容易： http : //jsfiddle.net/ngVSd/4
如果要正確居中，則必須顯式設置中央div的高度和寬度，然后為其設置寬度和高度的1/2的負邊距。 您還必須從正文中刪除填充和邊距。
請注意，要使文本在內部div中垂直居中，還需要將其行高設置為與其高度相同： http : //jsfiddle.net/ngVSd/6/
html, body { height: 100%; margin: 0; padding: 0; } #outerDiv { height: 100%; width: 100%; background-color: red; text-align: center; } #wordDiv { position: absolute; background-color: lightblue; top: 50%; left: 50%; width: 100px; height: 100px; line-height: 100px; margin: -50px -50px; }
<div id="outerDiv"> <div id="wordDiv">Word</div> </div>
解決方案3
0 2014-04-16 10:38:43
您還需要將html和body （任何其他父對象）的寬度和高度都設置為100％，因為100％表示父對象寬度/高度的100％，而不是屏幕的100％。
解決方案4
0 2014-04-16 10:39:08
div父級未指定要計算％的高度。
您需要為body設置高度，對於％ body需要從父級的高度html計算。
<html>將使用window的瀏覽器作為參考來計算％。
在W3C網站上查看此內容。
指定百分比高度。
相對於生成的盒子的包含塊的高度計算百分比。
如果未明確指定包含塊的高度（即，它取決於內容的高度），並且該元素的位置不是絕對的，則該值將計算為“自動”。 根元素上的百分比高度是相對於初始包含塊的高度。 注意：對於絕對定位的元素（其包含的塊基於塊級元素），百分比是相對於該元素的填充框的高度計算的。 這是CSS1的更改，在CSS1中，始終相對於父元素的內容框計算百分比。
為什么 height: 100% 不能將 div 擴展到屏幕高度？
[英]Why doesn't height: 100% work to expand divs to the screen height?
為什么不`width：100％; 高度：100%； 對象適配：包含；` 做一個<video>適合它的容器？</video>
[英]Why doesn't `width:100%; height:100%; object-fit: contain;` make a <video> fit its container?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.