为什么高度（100％）和宽度（100％）不起作用？
[英]why doesn't height: 100% and width: 100% work?
问题描述
Frustration 
挫折
I am frustrated of having to search the internet time and again to find a way to get a simple webpage to fill the whole screen on any device. 我很沮丧，不得不一次又一次地搜索互联网，以找到一种方法来获取一个简单的网页来填满任何设备上的整个屏幕。 I don't care about resolution, text size, whether the text comes inside the screen or not or anything else. 我不在乎分辨率，文本大小，文本是否在屏幕内或其他任何内容。 I don't care about anything. 我什么都不在乎 I have one word to display and it should come in the middle of the screen, vertically and horizontally. 我要显示一个字，它应该垂直和水平出现在屏幕中间。
CSS is driving me nuts. CSS使我发疯。 And I don't get why this ain't simpler. 我不明白为什么这并不简单。 And bootstrap. 和自举。 Well, thanks a lot guys you helped me a lot! 好，非常感谢你们，你们对我帮助很大！ But why the hell don't you have a class that would simply take up all the visible space on the screen? 但是，为什么没有一个只占用屏幕上所有可见空间的类呢？
I have tried a lot of variations and none of them work. 我尝试了很多变体，但都无济于事。 I just can't get that word to the freaking center of the screen. 我只是无法把这个词带到屏幕的中心。
Some variation 一些变化
The simplest one: http://jsfiddle.net/IcyFlame/ngVSd/ 最简单的一个： http : //jsfiddle.net/IcyFlame/ngVSd/
<div style="height: 100%; width: 100%; text-align: center; vertical-align: middle;">Word</div>
I don't know why this does not work. 我不知道为什么这行不通。 And I want an answer as to why this does not work. 我想回答为什么这不起作用。 And more importantly, I would really love it if you would just tell me how to make it work. 更重要的是，如果您只是告诉我如何使其工作，我将非常喜欢它。 All the time, everywhere. 随时随地。
This is a really useful question: Setting height: 100% on my label element doesn't work 这是一个非常有用的问题： 设置高度：我的标签元素上的高度100％不起作用
The person who gave the answer says that it is 100% of what. 给出答案的人说，这是答案的100％。 Really cool. 真的很酷。 And how do I solve the overall problem? 以及如何解决整体问题？ Oh no, I just answered the question. 哦，不，我刚刚回答了问题。
All the questions after that have been marked as duplicates. 之后的所有问题都被标记为重复。 One of which is: 其中之一是：
Height: 100% doesn't work! 高度：100％不起作用！ Why? 为什么？
Although the question is totally different, well, the moderators simply believed that this was a duplicate and it was marked as one. 尽管问题完全不同，但是主持人只是认为这是重复的并且被标记为一个。
Note: I am catering to a lot of screen sizes. 注意：我适合许多屏幕尺寸。 I don't want to write any kind of absolute pixel heights and widths anywhere in my final code. 我不想在最终代码中的任何地方写任何类型的绝对像素高度和宽度。
Please help me with this issue 请帮我解决这个问题
Reference: I want the word to come in the middle as it does on this gorgeours website: 参考：我希望这个词能在这个gorgeours网站上出现在中间：
http://debarghyadas.com/ http://debarghyadas.com/
Note that this just a reference. 注意，这只是参考。 I don't want to have the background image. 我不想有背景图片。 The whole header part of the webpage takes up the whole screen, that is what I want to achieve. 网页的整个标题部分占据了整个屏幕，这就是我想要实现的。
Everything is centered and beautiful. 一切都集中而美丽。 That is where I wanna go. 那就是我想去的地方。
4 个解决方案
解决方案1
1 2014-04-16 13:34:59
To be honest, I don't really understand what vertical-align is doing. 老实说，我不太了解Vertical-align在做什么。 So I can't really explain where your example fails. 因此，我无法真正解释您的示例在哪里失败。 But if you don't care about compatibility with IE7 and smaller, you may use the 'display: table' options: 但是，如果您不关心与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>
Hope that helps. 希望能有所帮助。
解决方案2
1 已采纳 2014-04-17 09:58:04
To get vertical alignment you have to have a second div inside the first 100% sized one. 要获得垂直对齐，您必须在第一个100％尺寸的div内有一个div。
Approx centering (fine for small amounts of text) is easy: http://jsfiddle.net/ngVSd/4 近似居中（适合少量文本）很容易： http : //jsfiddle.net/ngVSd/4
If you want proper centering you have to set the height and width of the central div explicitly then give it negative margins of 1/2 the width and height. 如果要正确居中，则必须显式设置中央div的高度和宽度，然后为其设置宽度和高度的1/2的负边距。 You also have to remove the padding and margin from body. 您还必须从正文中删除填充和边距。
Note that to vertically center the text in the inner div you also need to set its line-height to be the same as its height: http://jsfiddle.net/ngVSd/6/ 请注意，要使文本在内部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 parent has no height specified to calculate % . div父级未指定要计算％的高度。
You need to set height to body , and for % body needs too to calculate from parent's height: html . 您需要为body设置高度，对于％ body需要从父级的高度html计算。
<html> will use window's browser as reference to calculate %. <html>将使用window的浏览器作为参考来计算％。
See this on W3C site . 在W3C网站上查看此内容。
Specifies a percentage height.
The percentage is calculated with respect to the height of the generated box's containing block.
If the height of the containing block is not specified explicitly (ie, it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.