Как сделать сайт абсолютным и относительным сайтом, отзывчивым

Question

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

В основном я пытаюсь чтобы мой заголовок всегда был, независимо от того, будет ли высота экрана 85px, основной контент может варьироваться, а нижний колонтитул - 180px (потому что внутри у меня 3 строки по 60 в каждой).

Дело в том, что я надеваю Я не хочу, чтобы сайт имел y-scroll, поэтому он должен идеально подходить (поэтому размер основного содержимого может варьироваться)

У меня есть что-то вроде https://codesandbox.io/s/late-frog-cou89 some Chrome тестовый мобильный на консоли выглядит хорошо, но старые действительно плохие.

Есть ли способ, которым я могу сделать сайт max-height: 100% на каждом устройстве и главном контенте исправить его размер зависит от размера экрана мобильного телефона? Таким образом, пользователь может видеть всю информацию нижнего колонтитула без прокрутки вниз

Answer 1

Первое использование flexbox. Используйте vh (высота просмотра) для ширины и высоты, которые будут настроены для любого устройства, но только для вашего элемента root. После этого используйте%

.ui {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    width: 100vh;
}

.ui .header {
    height: 70px;
    width: 100%;
}

.ui .footer {
    height: 130px;
    width: 100%;
}

.ui .main {
    min-height: calc(100vh - 200px);
    width: 100%;
}

Answer 2

Вы можете использовать height: calc(100vh - 85px - 180px); для основного элемента контента. Это будет работать для любого размера экрана.

(= полная высота области просмотра минус высота верхнего и нижнего колонтитула)

Внимание: если вы используете границы и / или отступы в этих элементах, обязательно определите box-sizing: border-box для всех элементов, например, с универсальным селектором (*). Это будет включать границы и отступы в этом расчете.

И наконец: для этого вам вообще не нужно относительное и абсолютное позиционирование - просто оставьте все настройки position по умолчанию стереть их.

https://codesandbox.io/s/mystifying-perlman-rr4dx