CSS адаптивный дизайн с использованием em для макета

Я должен спроектировать (отзывчивый) веб-сайт, используя только HTML5, CSS3, эластичный дизайн и em в качестве единицы измерения. Я не знаю, как применить em к свойствам width и height, чтобы поля основной оболочки (т. Е. Div #page) были равны со всех сторон относительно фактического размера экрана.

Я пробовал свойства ширины и высоты с разными значениями em, но это приводит к тому, что поля не равны. Я попытался найти какое-то преобразование между em и%, но поскольку em основано на размере шрифта, это всегда процент от размера шрифта. Я также попытался вместо этого применить свойство position к другим контейнерам и элементам внутри #page.

<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/

Всего 2 ответа


Вы можете просто использовать margin: 0em auto, чтобы страница div осталась в центре. Но, к сожалению, вы не можете сделать высоту в центре. Здесь скрипка для придания ширины и удержания в центре.

#page {
  position: relative;
  width: 90%;
  height: 90%;
  top: 1em;
  margin:0em auto;
  bottom: 1em;
}

JSfiddle

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


    #page {
    position: fixed;
    width: 90%;
    height: 90%;
    top: 1em;
    right: 1em;
    bottom: 1em;
    left: 1em;
    margin: auto;
    }

Используя комбинацию fixed position и auto margin добились цели. Надеюсь это поможет!


Есть идеи?

10000