Задать вопрос
@Evelate
css

Почему div элемент уходит за пределы окна влево?

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример веб-страницы</title>
  <link rel="stylesheet" type="text/css" href="/js/Original/reset.css" >
  <link rel="stylesheet" type="text/css" href="/js/Original/style.css" >
  <script src="/js/Original/first.js"></script>
 </head>
 <body>
  <!-- Комментарий -->
  
  
  <div id="fonDiv_1"></div>

  <div id="parent">
    <div id="fonDiv_2"></div>
    <div id="fonDiv_3"></div>
  </div>

 </body>
</html>


CSS

body {
    background-image: url(/js/Original/picture/div3.jpg);
    background-size: cover;
}
html, body {
    height: 100%;
}

#parent {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#fonDiv_1 {
    /*background-color: blue;*/
    width: 100%;
    min-width: 500px;
    min-height: 150px;

    -webkit-box-shadow: 0px 19px 16px -5px rgba(0, 0, 0, 0.45);
    -moz-box-shadow: 0px 19px 16px -5px rgba(0, 0, 0, 0.45);
    box-shadow: 0px 19px 16px -5px rgba(0, 0, 0, 0.45);
}
#fonDiv_2 {
    background-image: url(/js/Original/picture/div2.png);
    background-size: 300px 100%;
    height: 100%;
    min-width: 300px;
    z-index: -1;

    -webkit-box-shadow: 19px 0px 16px -5px rgba(11, 11, 11, 1), -19px 0px 16px -5px rgba(11, 11, 11, 1);
    -moz-box-shadow: 19px 0px 16px -5px rgba(11, 11, 11, 1), -19px 0px 16px -5px rgba(11, 11, 11, 1);
    box-shadow: 19px 0px 16px -5px rgba(11, 11, 11, 1), -19px 0px 16px -5px rgba(11, 11, 11, 1);
}
#fonDiv_3 {
    height: 100%;
    min-width: 1000px;
    min-height: 300px;
    z-index: -1;
}


Здравствуйте,
При уменьшении масштаба в браузере, как и ожидается весь блок смещается в центральную часть.
При увеличении масштаба в браузере, fonDiv2 держит свою минимальную ширину, но уходит за пределы экрана влевую сторону, хотя fonDiv3 находится в зоне видимости и просмотреть весь контент можно с помощью полосы прокрутки.
Подозреваю, что это проделки reset.css. возможно рано его начал использовать, но всё же) Как исправить данную проблему? Чтобы fonDiv2 врезался в левую видимую зону браузера и дальше не уходил?
  • Вопрос задан
  • 1863 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
DELUX
@DELUX
Почему уходит?

У вас у селектора #fonDiv_3 была задана минимальная ширина в 1000px, от этого и проблема возникает при уменьшении окна браузера - так лучше не делать
#fonDiv_3 {
    height: 100%;
    min-width: 1000px;
    min-height: 300px;
    z-index: -1;
}


Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка бота рассылок в Telegram
25 нояб. 2024, в 10:16
7000 руб./за проект
Разработать бота-краулера для парса всех каналов в телеграм в бд MySQL
25 нояб. 2024, в 09:53
14000 руб./за проект
Изменить код STM32 и конфигурацию сервиса удаленного доступа
25 нояб. 2024, в 08:57
5000 руб./за проект
Ещё заказы