Задать вопрос
@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, но тогда сайт будет смещен немного и в маленьких экранах, справа будет немного пустого места
  • Вопрос задан
  • 6300 просмотров
Комментировать
Подписаться 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
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Middle Project Manager (внутренние проекты)
Foxible • Москва
от 70 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Натянуть верстку на Bitrix
19 февр. 2025, в 21:51
50000 руб./за проект
Разработать мобильное приложение iOS
19 февр. 2025, в 21:33
150000 руб./за проект
Парсинг и обход Cloudflare
19 февр. 2025, в 21:08
30000 руб./за проект
Ещё заказы