Блог

Главная - Вопросы по программированию - Дизайн веб-страницы в min-window

Дизайн веб-страницы в min-window

#html #css

#HTML #css

Вопрос:

Я делаю мини-проект, используя только HTML и CSS, проблема в том, что когда я буду иметь максимальный размер окна, дизайн веб-страницы будет правильным, но когда я сверну экран окна, справа появится огромное пустое пространство. Даже я использую width = 100vh и height = 100vw.

Комментарии:

1. Товарищ пользователь! Вы что-нибудь пробовали 🙂 Для этого потребуется медиа-запрос 🙂 И макет, который соответствует нашим потребностям 🙂

2. Было бы хорошо, если бы вы добавили, пример вашей работы с вашим вопросом для проверки.

Ответ №1:

Вы действительно используете 100vw везде? Один больший элемент может вызвать:

 <body>
  <div style="width: 150vw; background-color: yellow; height: 50px;"></div>
  <p style="background-color: blue;">This element has the normal window width. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>

Или это может привести к заполнению, если вы не установили box-sizing: border-box; 

 <body>
  <div style="width: 100vw; background-color: yellow; height: 50px; padding-right: 150px"></div>
  <p style="background-color: blue;">This element has the normal window width. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>

В противном случае нам нужно знать больше деталей, как сказал Нур-Аллах Хусейн, в идеале фрагмент кода.