Задать вопрос
@TimTulin
html

Почему divы, без ширины, обрезаются с правой стороны при маленьких разрешениях браузера?

Верстаю сайты, давно заметил, что когда даешь DIV (фоновый, которому просто задаешь фон).
Например




.bg {
background: url(../images/bg1.png) no-repeat center top;
min-height:300px;
}
.newblock {
width:1000px;
margin:0 auto;
background:white;
}

То есть, задается блок с фоном разрешением примерно 1980, в нем блок с шириной 1000px(фиксированная ширина), и когда браузер уменьшить, или посмотреть на экранах маленького разрешения меньше 1000px, то фон будет обрезан, показал на скриншотах ниже.

6d00d67e420285e40e47989dfba933f9.png

777089bac19b42d3febdeb4af134b1da.png

Проблема решается если добавить фону min-width большую чем блок 1000px, но тогда сайт будет смещен немного и в маленьких экранах, справа будет немного пустого места
  • Вопрос задан
  • 6281 просмотр
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 1
mrdubz
@mrdubz
front end developer
<meta name = "viewport" content = "width = 1000">
Ответ написан
8 комментариев
8 комментариев
Пригласить эксперта
Ответы на вопрос 4
mrdubz
@mrdubz
front end developer
Вообще не ок делать {margin: 0 auto;} для body

используйте внутри дополнительный блок, который задает ширину и центровку относительно body
Ответ написан
3 комментария
3 комментария
mrdubz
@mrdubz
front end developer
Вот так, и все будет по центру

<style>
.wrap {
width: 1000px;
margin: 0 auto;
}
</style>

<body>

<div class="block-1">
   <div class="wrap">
      Ваш контент
   </div>
</div>

<div class="block-2">
   <div class="wrap">
      Ваш контент
   </div>
</div>

</body>
Ответ написан
3 комментария
3 комментария
dabich
@dabich
Web Developer
Попробуй вот так, если я понял суть.
.bg {
    background: url(../images/bg1.png) no-repeat center top;
    min-height: 300px;
    width: 100%;
}
Ответ написан
1 комментарий
1 комментарий
Olivoin
@Olivoin
на крайняк бодям сделать min-height
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настройка сервера
18 апр. 2024, в 21:56
2000 руб./за проект
Помощь с водпресс
18 апр. 2024, в 21:00
150 руб./за проект
Спарсить ссылки на все товары конкретного продавца в озон
18 апр. 2024, в 20:13
2000 руб./за проект
Ещё заказы