让div出现在相同的位置，无论屏幕大小如何

我正在为基于Google材料设计（即大量使用卡片）的客户开发网站。让div出现在相同的位置，无论屏幕大小如何

我想要的是让页面的第一张牌不断地在浮动动作按钮的中途点处在屏幕底部上方偷看，如下图所示。

我的问题是，当网站正在与屏幕分辨率不同的设备上查看此不能很好地工作。我尝试过使用百分比和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/

来源

2016-11-11 Jack

你可以提供一些的jsfiddle？ – Sagar

[https://jsfiddle.net/dyxeaa18/]看起来像这样？如果可能的话，尝试提供相关的HTML＆CSS像你的照片。 –

你有没有试过vh和vw单位？ http://www.quirksmode.org/css/units-values/viewport.html – fredrover

使用VW（视口宽度），而不是百分比。 1vw =视口宽度的1/100，不考虑设备PPI等。因此，如果您希望div保持比例固定，无论设备大小和屏幕分辨率如何 - 请使用VW设置横轴位置。

例子：

.somediv{ margin-right:20vw}

来源

2016-11-11 22:52:01 Korgrue

让div出现在相同的位置，无论屏幕大小如何

回答

相关问题