Как использовать процент в позиционировании полей для создания совместимости по ширине экрана, устройствам и устройствам?

Question

Я пытаюсь разместить элемент в своем нижнем колонтитуле для мобильных устройств. Это работает, когда я использую px, но когда я пытаюсь использовать проценты, он не двигается. Причина, по которой я хочу использовать проценты, заключается в том, что go кажется каким-то образом позиционировать элемент абсолютно на разных устройствах / браузерах, тогда как px просто определяет поле в одном устройстве / браузере. Итак, вопрос в том, почему top: 10% не работает, когда top: 40px работает?

@media (max-width: 768px)
{.copyright{position: 
relative; 
transform:rotate(90deg); 
right: 150px; top: 10% 
!important; vertical-align: 
middle;}} 

<div  
class="copyright">copyr
ight</div>

Answer 1

Проценты рассчитываются относительно ширины родительского элемента, даже для верхнего и нижнего полей.

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

1vh = 1/100 от высоты окна просмотра