CSS3 Адаптивное всплывающее окно

Я пытаюсь создать окно поиска с всплывающим окном результатов, которое хорошо выглядит как на рабочем столе, так и на мобильных устройствах.

Я попытаюсь объяснить лучше, используя эти два макета:

Для настольной версии я хотел бы указать ширину и высоту всплывающего окна с результатами, чтобы оно плавало над содержимым страницы.

В мобильной версии результаты заполняют всю ширину экрана и всю высоту под окном поиска. Таким образом, никакой контент не выглядывает из-за него, и нет прокрутки, чтобы увидеть какую-либо часть результатов поиска.

Концептуально, я считаю, что для этого мне нужен медиа-запрос, но я изо всех сил пытаюсь заставить его работать хорошо.

Я включил полный фрагмент, но вот CSS, с которым я повозился. Значение 320px совершенно произвольное, и это часть моей проблемы.

@media only screen and (max-width: 320px) {
  .popup {
    width: 100%;
  }
}

@media only screen and (min-width: 320px) {
  .popup {
    width: 295px;
  }
}

@media only screen and (max-height: 320px) {
  .popup {
    height: 100%;
  }
}

@media only screen and (min-height: 320px) {
  .popup {
    height: 300px;
  }
}

Меня смущают две вещи:

1. Глядя на эти значения min- и max-width, на самом деле не так уж хорошо. Телефон с разрешением Full HD будет выглядеть как настольный ПК, несмотря на то, что его размер составляет всего 5 дюймов. Есть ли чистый способ CSS ограничить размер экрана вместо разрешения? Или к обоим, которые затем также обслуживали бы настольные браузеры с измененным размером.
2. Установка ширины на 100% работает нормально, потому что мое всплывающее окно начинается в самом левом углу экрана. Высота 100% не работает, потому что общая высота составляет 100% экрана + высота окна поиска + высота логотипа (как только я добавлю это), и поэтому она прокручивается в нижней части экрана. Что мне нужно, так это способ изменить его размер на расстояние между верхней частью моего DIV и нижней частью экрана.

Я бы не возражал против решения на JavaScript, но я думаю, что смогу сделать это только с помощью CSS, и я бы предпочел это.

Кроме того, я доволен решением, которое совместимо только с более новыми браузерами (скажем, двухлетней давности).

Редактировать: я должен добавить, что я использую Foundation в проекте. Я не использовал ничего из Foundation в этом фрагменте, но если есть что-то полезное, что я упустил, я буду более чем счастлив его использовать.

input {
  font-size: 18pt;
}

.popup {
  margin-top: 2px;
  position: absolute;
  display: block;
  background-color: Green;
}

@media only screen and (max-width: 320px) {
  .popup {
    width: 100%;
  }
}

@media only screen and (min-width: 320px) {
  .popup {
    width: 295px;
  }
}

@media only screen and (max-height: 320px) {
  .popup {
    height: 100%;
  }
}

@media only screen and (min-height: 320px) {
  .popup {
    height: 300px;
  }
}

<input/>
<div class="popup">
</div>
<div>
  Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. 
</div>