网站设计中一个常见问题是“如何将元素的高度设置为100％”？
这似乎是一个简单的答案。您只需使用CSS将元素的高度设置为100％，但这并不总是拉伸该元素以适合整个浏览器窗口。让我们找出为什么会发生这种情况以及您可以采取哪些措施来实现这种视觉风格。
像素和百分比
使用CSS属性和使用像素的值定义元素的高度时，该元素将占用浏览器中的那么多垂直空间。例如，带有一个段落
身高：100px;
将在您的设计中占用100像素的垂直空间。浏览器窗口的大小无关紧要，此元素的高度为100像素。 百分比与像素的工作方式不同。根据W3C规范，百分比高度是根据容器的高度计算的。所以，如果你把一个段落 身高：50％;
在高度为100px的div中，段落的高度为50像素，这是其父元素的50％。 如果你正在设计一个网页，并且你有一个柱子，你想要占据窗户的整个高度，那么自然倾向于添加一个 身高：100％;
那个元素。毕竟，如果你设置了 宽度
至 宽度：100％;
元素将占据页面的完整水平空间，所以 高度
应该是一样的，对吧？不幸的是，事实并非如此。 要理解为什么会发生这种情况，您必须了解浏览器如何解释高度和宽度。 Web浏览器根据浏览器窗口的打开宽度计算总可用宽度。 宽度
如果未在文档上设置任何值，浏览器将自动流动内容以填充窗口的整个宽度（默认为100％宽度）。 高度值的计算方式与宽度不同。事实上，浏览器根本不评估高度，除非内容太长以至于它超出视口（因此需要滚动条）或者网页设计者为页面上的元素设置绝对值。 高度
否则，浏览器只是让内容在视口宽度内流动，直到结束。实际上根本没有计算高度。 在具有未设置高度的父元素的元素上设置百分比高度时会出现问题 - 换句话说，父元素具有默认值。 身高：自动;
实际上，您要求浏览器根据未定义的值计算高度。由于那将等于空值，结果是浏览器什么都不做。 如果要将网页上的高度设置为百分比，则必须设置高度 一切 您想要定义高度的父元素。换句话说，如果您有这样的页面： 内容在这里
你可能想要 DIV
并且其中的段落具有100％的高度，但该div实际上具有 二 父元素： 和。为了定义高度 DIV
到相对高度，你必须设置的高度 身体
和 HTML
元素也是。因此，您需要使用CSS来设置div的高度，还要设置body和HTML元素的高度。这可能是一个挑战，因为你可以很快地被设置为100％高度的所有东西不堪重负，只是为了达到这个预期的效果。 既然您已经知道如何将页面元素的高度设置为100％，那么对所有页面执行此操作会很令人兴奋，但您应该注意以下几点： 要解决此问题，您还可以设置元素的高度。如果你把它设置为 汽车，
滚动条将在需要时出现，但在不需要时会消失。这修复了视觉中断，但它添加了滚动条，您可能不需要它们。 解决这一难题的另一种方法是尝试CSS视口单元。通过使用视口高度测量单位，您可以调整元素的大小以占据视口的已定义高度，并且随着视口的更改而变化！这是在页面上获得100％高度视觉效果的绝佳方式，但仍然可以灵活地适应不同的设备和屏幕尺寸。 为什么百分比高度失败
使用100％高度时需要注意的事项
使用视口单元
