讓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出現在相同的位置，無論屏幕大小如何

回答

相關問題