无论屏幕大小如何，使div显示在相同位置

Question

我正在根据Google材料设计（即大量使用卡片）为客户开发网站。

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

我的问题是，当在具有屏幕分辨率的不同设备上查看网站时，这不起作用。我已经尝试使用百分比和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（视口宽度）而不是百分比。 1vw =视口宽度的1/100 - 无论设备PPI等 因此，如果您希望div无论设备大小和scren分辨率如何都保持按比例固定 - 将水平轴位置设置为VW。

示例：

.somediv{ margin-right:20vw}