作为一名追求完美的CSS开发者，通常会避免使用表格来进行页面布局，而是希望子元素能够在父元素中垂直和水平居中，或者在特定条件下遵守基于百分比的尺寸，而不仅仅是在固定测量值的line-height或父元素尺寸下工作。尝试设置height和min-height，调整margin和padding，尝试IE特定的hack，确保html和body元素的高度设置为100%...认为已经做到了，然后在7个不同的浏览器中预览，现在它在之前工作的一个浏览器中完全坏了。这是一个解决方案，它抛弃了所有的技巧和优雅，而是在渲染想要的东西时，用大锤将每个浏览器都打服。
这里的目标很简单：在CSS中使用固定（像素）测量值来视觉上模拟百分比单位。显然，有几种方法可以做到这一点，也有几种选择要做。可以在每次浏览器窗口调整大小时调整一切（没有）。可以完全用JavaScript来做这件事，跳过ASP.NET。选择不这样做，因为喜欢在服务器端有视口尺寸，例如在服务器上有自定义渲染的情况下。不管做什么，至少需要一些JavaScript来有效地获取这些尺寸。然后会想要把它们交给服务器，服务器应该响应一个包含为浏览器尺寸量身定制的测量单位的样式表。
感谢Andy Langton的文章，可以很容易地用一行JavaScript获取浏览器视口的大小：
var win = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = win.innerWidth || e.clientWidth || g.clientWidth, y = win.innerHeight || e.clientHeight || g.clientHeight;
现在在x变量中有宽度，在y变量中有高度，这两个都可以用选择的个人方法传递给服务器——例如一个Ajax调用，隐藏字段等。只是写一个指向动态CSS处理器的link元素，并把x和y值作为查询字符串参数附加上去：
document.write("");
这会在页面上添加一个样式表链接，URL如下：
http://localhost:8080/css/DynHeightCSS.ashx?w=1920&h=1012
。
动态CSS处理器（DynHeightCSS.ashx）计算给定浏览器尺寸的每个百分比值的像素尺寸，并将这些嵌入到自定义类中，用于设置height、line-height和width。例如，生成响应中的第一个三个类——分别代表1%的高度或宽度——看起来像这样（考虑到当前的浏览器尺寸1920 x 1012）：
.height-1-pct { height: 10px; }
.line-height-1-pct { line-height: 10px; }
.width-1-pct { width: 19px; }
这里有一个可能想要使用这种策略的例子。下面的白色盒子是页面高度的45%，想要在其中垂直居中一个文本跨度。简单地设置vertical-align: middle没有效果（右边），即使设置了height或line-height为100%：
在例子中（上面的图像，下面的标记），右边的文本块垂直对齐不正确。它和左边正确对齐的（左边）的唯一区别是动态CSS提供的height-45-pct类属性添加到左边的跨度。知道白色盒子是页面高度的45%，希望文本块是相同的高度——但是以像素为单位——所以只是使用对应于该高度的动态生成的类：
<div style="width: 50%; margin-top: 4px; float: left; text-align: center;">
<span class="height-45-pct" style="display: table-cell; vertical-align: middle;">
This text is supposed to vertically
<br>
align middle. The height is 400px.
</span>
</div>
<div style="width: 50%; margin-top: 4px; float: left; text-align: center;">
<span style="height: 100%; display: table-cell; vertical-align: middle;">
So is this text, but line-height 100%
<br>
doesn't work quite the same.
</span>
</div>
要使用代码，只需下载DynHeightCSS.ashx.cs，将其添加到/css目录作为HTTP处理器，并将上述JavaScript放入页面的头部。然后当需要强制一个不听话的元素服从百分比测量时，使用其中一个动态生成的类来这样做。注意——百分比总是相对于页面的，而不是包含元素的；将需要在这里和那里做一些数学运算来转换为页面相关的分数。
显然，除了height、line-height和width之外，还有其他用例可以使用这种粗暴的方法。最小和最大高度是想到的。在CSS中有一个百分比到像素的计算可以让自由地使用绝对定位，否则会很困难。