网站设计中常见的问题是“如何将元素的高度设置为100％”？
这可能看起来像一个简单的答案。 您只需使用CSS将元素的高度设置为100％，但这并不总是拉伸该元素以适应整个浏览器窗口。 让我们来看看为什么会发生这种情况，以及您可以做些什么来实现这种视觉风格。
像素和百分比
当您使用CSS属性和使用像素的值定义元素的高度时，该元素将占用浏览器中的垂直空间。
例如，一个高度为100px的段落; 在你的设计中将占用100像素的垂直空间。无论你的浏览器窗口有多大，这个元素的高度都是100像素。
百分比的工作方式与像素不同。 根据W3C规范，百分比高度是根据容器的高度计算的。 所以，如果你把一个段落的高度：50％; 在高度为100px的div内，段落高度为50像素，是其父元素的50％。
为什么百分比高度失败
如果你正在设计一个网页，并且你有一列你想占据整个窗口的高度，那么自然的倾向是增加一个高度：100％; 到那个元素。 毕竟，如果您将宽度设置为宽度：100％; 该元素将占据页面的整个水平空间，所以高度应该相同，对吧？ 不幸的是，事实并非如此。
要理解为什么发生这种情况，您必须了解浏览器如何解释高度和宽度。 Web浏览器根据浏览器窗口打开的宽度来计算总可用宽度。 如果您未在文档上设置任何宽度值，则浏览器将自动流动内容以填充窗口的整个宽度（100％宽度是默认宽度）。
高度值的计算方式与宽度不同。 实际上，除非内容太长以至于超出视口（因此需要滚动条），或者Web设计者为页面上的元素设置了绝对高度，否则浏览器根本不评估高度。 否则，浏览器只是让内容在视口宽度内流动，直到结束。 高度实际上根本不计算。
在设置父元素时未设置高度的元素上设置百分比高度时会出现问题 - 换句话说，父元素具有默认高度：auto; 。 实际上，您要求浏览器根据未定义的值计算高度。 由于这将等于空值，结果是浏览器什么都不做。
如果要将网页的高度设置为百分比，则必须设置要定义高度的每个父元素的高度。 换句话说，如果你有这样一个页面：
内容在这里
您可能希望div和其中的段落具有100％的高度，但该div实际上有两个父元素：
和。 为了将div的高度定义为相对高度，您还必须设置body和html元素的高度。
所以你需要使用CSS来设置不仅div的高度，而且body和html元素。 这可能是一个挑战，因为您可以很快将所有设置为100％高度的设备都淹没，只是为了达到预期的效果。
处理100％高度时需要注意的一些事项
现在您已知道如何将页面元素的高度设置为100％，将页面元素的高度设置为所有页面可能会很令人兴奋，但您应该注意以下几点：
- 边距和填充可以添加一个不需要滚动条的地方。 我发现处理百分比高度（和宽度）时最烦人的事情之一是，那些相同元素上的填充和边距可以将滚动条添加到页面，即使所有内容都显示而不需要滚动条。 这是因为元素的高度或宽度是计算的第一件事。 然后添加边距和填充。 因此，如果您的元素高度为100％，上下边距均为10像素，则会有一个滚动条用于额外的20个像素。 请记住，CSS框模型将边距，边框和填充添加到元素的大小，因此100％的其他框模型值实际上会超过100％。
- 如果您的内容占用的空间超过了定义的高度，它将在其后覆盖任何内容。 换句话说，如果您的设计的柱子高度为80％，而其内部的内容将占据高度的100％，那么额外的20％将继续在柱子下方并打破视觉设计的页面。 如果该列下面有内容，则文本将简单地写在该列的顶部。 我经常看到这种情况发生在网页设计师试图强制页面高度并使其完美启动时发生，但是当该页面上的内容将来发生变化时，它们的绝对高度会完全破坏页面的流动。 当您构建响应式网站时，其宽度和高度必须随着视口的大小而变化，这是双重的。
为了解决这个问题，你可以设置元素的高度。 如果将其设置为自动，则会在需要时显示滚动条，但如果不需要则会消失。 这可以修复视觉中断，但它会在您不想要的位置添加滚动条。
使用视口单位
解决这一挑战的另一种方法是使用CSS视口单元进行试验。 通过使用视口高度度量单位，可以调整元素的大小以占据视口的定义高度，并且视口将随着视口更改而变化！ 这是在页面上获得100％高度视觉效果的好方法，但仍然可以灵活适用于不同的设备和屏幕尺寸。