Мне нужно спроектировать (отзывчивый) веб-сайт, используя только HTML5, CSS3, эластичный дизайн и em в качестве единицы измерения.Я не знаю, как применить em к свойствам ширины и высоты, чтобы поля основной оболочки (т. Е. Div #page) были равны со всех сторон относительно фактического размера экрана.
Я пробовал ширинуи свойства высоты с различными значениями em, но это приводит к тому, что поля не равны.Я попытался найти какое-то преобразование между em и%, но поскольку em основано на размере шрифта, это всегда процент от размера шрифта.Я также попытался вместо этого применить свойство position к другим контейнерам и элементам внутри # страницы.
<body>
<div id="page">
<header>
<nav></nav>
</header>
<div id="content">
<article></article>
<article></article>
</div>
<aside></aside>
<footer></footer>
</div>
</body>
#page {
position: relative;
width: 90%;
height: 90%;
top: 1em;
right: 1em;
bottom: 1em;
left: 1em;
}
Я хочу иметь возможность использовать только em в качестве единицы измерения и иметь поля #page, равные по отношениюк реальному размеру экрана, но ширина либо становится больше, чем размер экрана, либо правое поле не равно другим полям.
Вот ссылка на JSFiddle со всем моим кодом: https://jsfiddle.net/binaryglot/8dkn96g0/