为什么高度（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.