javascript - 调整 margin-top/bottom 与屏幕高度成比例

Question

我有多行元素，我想垂直对齐，这样在不同的分辨率下，第一个屏幕(没有滚动)对每个元素都是相同的。

幸运的是，我有一些限制，我必须遵守 800 像素和 1200 像素(垂直分辨率)。因此，只有在这两个值之间，我的边距才必须按比例增加/减少。如果大于或小于该间隔，屏幕将保持为这些限制之一。

不幸的是，根据要求我不能使用媒体查询或 javascript 来计算这个，所以它必须是一个纯 CSS 解决方案。

有办法吗？不影响元素的高度、宽度或左/右边距。

或者是否有一种 javascript 方法可以在不注入(inject)内联 CSS 属性的情况下对其进行修改？我没听说过，但是可以修改 CSS 文件吗？

编辑首选非表格解决方案。

Answer 1

没有javascript？我看到能够实现此目的的唯一标记(垂直 + 均匀地划分页面)是 <table>

我fiddled an example here

您必须首先在 body 和 html 上触发 100% 的高度，

html, body {
    height:100%
}

<table style="width:100%;height:100%">
    <tr>
        <td style="color:green;background-color:pink">a&nbsp;a</td>
    </tr>
    <tr>
        <td style="color:blue;background-color:aqua">b&nbsp;b</td>
    </tr>
    <tr>
        <td style="color:red;background-color:cyan">r&nbsp;r</td>
    </tr>
</table>

尝试一下，测试一下，看看这个解决方案是否适合您的情况。

否则，如果您打算使用 javascript，您可以查看“not fully supported” ' calc() 在 css3 中