调整边缘-顶部/底部与屏幕高度成比例

Resize margin-top/bottom proportional to screen height

本文关键字：屏幕 高度 成比例 底部 边缘 -顶部 调整      更新时间：2023-09-26

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

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

不幸的是，基于需求，我不能使用media-queries或javascript来计算这个，所以它必须是一个纯CSS解决方案。

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

或者有一个javascript的方式来修改，而不注入内联CSS属性?我还没有听说过，但是可以修改CSS文件吗?

EDIT首选非表解决方案。

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

我在这里摆弄了一个例子

你必须首先触发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() in css3

相关文章：