Задать вопрос
@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 врезался в левую видимую зону браузера и дальше не уходил?
  • Вопрос задан
  • 1779 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
DELUX
@DELUX
Почему уходит?

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


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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Frontend разработчик
Базис-Центр • Коломна
от 30 000 до 70 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Оформление ВК, услуги-4 карточки, 1 обложка
04 мая 2024, в 12:21
800 руб./за проект
ASO дизайн для ios приложения (Иконка+Скриншоты)
04 мая 2024, в 12:04
5000 руб./за проект
Flutter (IOS) собрать приложение и внести правки
04 мая 2024, в 12:00
10000 руб./за проект
Ещё заказы