html - 无论屏幕大小如何，使一个 div 出现在相同的位置

Question

我正在为客户开发一个基于 Google Material Design(即大量使用卡片)的网站。

我想要的是让页面的第一张卡片在 float 操作按钮的中间点的屏幕底部上方不断地窥视，如下图所示。

我的问题是，当在具有不同屏幕分辨率的不同设备上查看网站时，这无法正常工作。我曾尝试使用百分比和 em 从顶部填充这张卡片，但这些都失败了，卡片改变了位置。我剩下的选择是使用媒体查询，但这可能会被证明是令人费解的。

以下是卡片当前存在的 CSS:

#content-card
{
    position: relative;
    display: table;
    background-color: white;  
    top: 0;
    left: 0;
    right: 0;    
    width: 100%; 
    overflow: hidden;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
    z-index: 2;
    height: auto;
 }

欢迎就如何实现预期效果提出任何建议和见解。

谢谢:)

根据要求执行基本的 jfiddle :- https://jsfiddle.net/7fudv084/1/

Answer 1

使用 vw(视口(viewport)宽度)而不是百分比。 1vw = 视口(viewport)宽度的 1/100 - 无论设备 PPI 等如何。 因此，如果您希望无论设备大小和屏幕分辨率如何，div 都按比例固定，请使用 VW 设置水平轴位置。

示例:

.somediv{ margin-right:20vw}