Создание 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

Использование оч.сл. (ширина окна), а не в процентах. 1vw = 1/100th ширины окна просмотра - независимо от устройства PPI и т. Д. Итак, если вы хотите, чтобы div оставался пропорционально фиксированным независимо от размера устройства и разрешения scren - установите положение горизонтальной оси с помощью VW.

Пример:

.somediv{ margin-right:20vw}