Что сделать, чтобы тело занимало всю страницу? В моем CSS для body и html высота и ширина 100%.

В мобильной версии корпус уменьшен таким образом mobile

С ПК-версией с шириной все нормально, а вот высота не на всю страницу pc

html {
    overflow: auto;
    height: 100%;
    width: 100%;
}
body {
    background-color: #1c1c1c;
    font-family: 'Press Start 2P', cursive;
}

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

И если подскажете, что еще можно поправить, буду очень признателен

1
Skorzi 11 Окт 2021 в 19:15

3 ответа

Лучший ответ

Многие из ваших элементов имеют фиксированную ширину в пикселях, которая не изменяется в медиа-запросе. Например. у вас есть:

.container {
    width: 890px;
    ...
}

.menu__list {
  ...
  width: 700px;
}

Вам нужно изменить их в вашем медиа-запросе

@media screen and (max-width: 450px) { ... }

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

.container {
  width: 100%
}

Или иногда

.container {
  width: 100%
  max-width: 320px;
}
0
user31782 11 Окт 2021 в 16:34

На основе первого опубликованного вами кода .

Измените свой контейнерный класс css (Desktop), поскольку он унаследован от оболочки.

.container {
    margin: 0 auto;
}

Ваш текущий css (удалите ширину и отступ)

.container {
    width: 890px;
    margin: 0 auto;
    padding: 0 20px;
}

С мобильным телефоном все в порядке, он просто наследует размер экрана эмулятора.

0
Junta 11 Окт 2021 в 16:46

height: 100%; Означает высоту всего текста.

Используйте height: 100vh;, что означает 100% высоты области просмотра.

При ширине 100% означает ширину родительского элемента, который в вашем случае является документом.

-1
Shmiel 11 Окт 2021 в 16:24