在下面的示例中，为什么内联块元素不占据全高？

Question

有一个100％高度和宽度的内联块元素：

<div style="width: 100%; height: 100%; background: red; display: inline-block">Y</div>

为什么doesn't this div take up whole height, but takes up full width？

Answer 1

块框causes it to be as wide as its containing block allows上的自动宽度。另一方面，自动高度为causes it to only be as tall as its contents。

相关的屏蔽框为body，扩展名为html。两个元素都没有固有高度（即使初始包含块有），因此两个元素的高度默认为auto。

内联块的100％宽度和高度遵循其包含块的使用宽度和高度，在本例中为body。如果您在body上指定任意高度，或在height: 100%上指定html, body，则会相应地调整内联块。

请注意，因为内联块与嵌套内联的块框基本相同，所以百分比宽度和高度的计算方式与元素为块级别的方式相同。

Answer 2

因为您的html和body标记没有占据全高。

除非另有说明，否则块元素占据全宽，但只需要尽可能多的高度 - 这是很自然的，因为HTML最初是作为格式化文本文档的一种方式。你不会想要一个段落来占据整个窗口的高度。

您必须将其高度设置为100%才能使其正常工作 - 将它们拉伸到窗口高度：

html, body {
    margin: 0;
    padding:0;
    height:100%;
}

http://jsfiddle.net/gdyLs/1/

Answer 3

它需要其父级的高度

尝试：

html,body {
    height: 100%;
}

Answer 4

这是因为默认情况下div占全宽，除非另有说明。

使其成为内联块，只允许它内联，但保留其块性质，例如设置宽度和高度，顶部和底部边距以及填充。

html标记中每个元素（非null）的高度与行的高度相同..可以通过line-height属性进行更改。

如果你希望它采取全高度，请按照上述答案。

Answer 5

您需要指定html和body的高度，然后只有div才需要100% height

html, body{
    height: 100%;
}