Макет веб-сайта меняется, когда я перемещаю окно инструментов разработчика Google вверх

Я столкнулся с проблемой изменения макета веб-сайта в окне инструмента разработчика Google, которое открывается при нажатии F12. Итак, чтобы быть более понятным, когда я нажимаю F12, окно появляется, но когда я перемещаю окно вверх, макет меняется, то есть раздел галереи реагирует на окно и также перемещается вверх. Я даже не знаю, что вызывает такую проблему. Мне действительно нужна твоя помощь. Вот код, который у меня есть:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <link rel = "stylesheet" href = "./bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel = "stylesheet" href = "./main.css">
    <link href = "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel = "stylesheet">
    <link rel = "stylesheet" href = "./external/owl.carousel.min.css">
    <link rel = "stylesheet" href = "./external/owl.theme.default.min.css">
    <title>Document</title>
</head>
<body>
    <header class = "header">
    <div class = "container">
    <div class = "row">
        <div class = "col-md-6 intro__welcome-box">
        <p class = "header__welcome-content">Welcome to our kids School!!</p>
        </div>

</div>
    </div>

    <div class = "navbar">
            <div class = "container">
                <div class = "row flex-container">
                            <h1 class = "logo-box">
                                <a href = "#">
                        <img class = "logo-box__image" src = "./images/logo.png" alt = "The logo">
                               </a>
                         <span class = "logo-box__motto"> Все начинается с детской мечты</span>
                        </h1>
                    <nav class = "navigation">
                        <ul class = "navigation__list">
                            <li class = "navigation__link"><a href = "">О Sunnyvale</a></li>
                            <li class = "navigation__link"><a href = "">Галерея</a></li>
                            <li class = "navigation__link"><a href = "">Персонал</a></li>
                            <li class = "navigation__link"><a href = "">Услуги</a></li>
                            <li class = "navigation__link"><a href = "">Контакты</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </header>

    <section class = "showcase">
        <div class = "container-fluid p-h-0">
            <div class = "row">
                <div class = "col-md-6">
<img src = "./primary-original.jpg" alt = "">
                </div>
                <div class = "col-md-6">
<div class = "showcase-content">
    <h2>Join Our Journey</h2>
    <p>of World Discovery</p>

    <a href = "">Find Out More</a>
</div>
                </div>
            </div>
        </div>
    </section>

    <section class = "gallery">
<div class = "container">
<div class = "row">

    <div class = "col-md-6">
        <div class = "content">
            <h2>
                Добро Пожаловать в галерею Sunnyvale
            </h2>
        </div>
        <div class = "content-links m-v-30">
                <a class = "anchor light-red" href = "">Узнать больше</a>
                <a class = "anchor orange" href = "">Смотреть Все</a>
            </div>

    </div>
    <div class = "col-md-6">
        <div class = "carousel-container">
            <div class = "owl-carousel room-carousel owl-theme">
                <img src = "./medium-98dcfe.jpg" alt = "">
                <img src = "./primary-original.jpg" alt = "">

            </div>
        </div>
    </div>


</div>

</div>

    </section>


    <script
  src = "https://code.jquery.com/jquery-3.3.1.min.js"
  integrity = "sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8 = "
  crossorigin = "anonymous"></script>
  <script src = "./external/owl.carousel.min.js"></script>
  <script>
  $('.room-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:1
        }
    }
})
</script>
</body>
</html>

CSS code

.header {
  background: #ecf0f1;
}

.header [class*='intro'] {
  padding: 2rem;
}

p {
  margin: 0;
}

.intro__welcome-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navbar {
  background: white;
}

.logo-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.logo-box__motto {
  font-size: 16px;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  border-left: 1px solid rgba(88, 87, 87, 0.507);
  padding: 0 1rem;
  color: rgba(88, 87, 87, 0.507);
  font-weight: bold;
  line-height: 1.5;
}

.logo-box__image {
  padding-right: 1rem;
}

.logo-box__motto {
  width: 30%;
  text-transform: uppercase;
  font-size: 1.5rem;
}

.gallery {
  padding: 5rem 0;
}

.gallery .content {
  width: 40%;
  text-align: center;
  text-transform: uppercase;
  font-size: 2rem;
  margin: auto;
}

.gallery .content h2 {
  line-height: 1.5;
}

.m-v-30 {
  margin: 30px 0;
}

.content-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.anchor {
  text-decoration: none;
  color: white;
  font-weight: 600;
  display: inline-block;
  padding: 1rem 1.5rem;
  border-radius: 30px;
  text-transform: uppercase;
}

.anchor:hover {
  text-decoration: none;
  color: white;
}

.anchor.light-red {
  background: rgba(255, 0, 0, 0.658);
  margin-left: 7rem;
}

.anchor.orange {
  background: orange;
  margin-right: 7rem;
}

.carousel-container {
  height: 300px;
  border-radius: 10px;
  overflow-y: hidden;
}

.p-h-0 {
  padding: 0;
}

.cloud {
  height: 200px;
  width: 100%;
  background-image: url(/cloud.png);
  position: absolute;
  bottom: 0;
}

.showcase img {
  width: 100%;
  height: 100%;
}

.showcase {
  height: 70vh;
  position: relative;
}

.header__tel-number {
  color: #ff7b00;
  font-weight: 700;
  font-size: 1.5rem;
}

.navigation__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.navigation__link a {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: rgba(44, 43, 43, 0.603);
  font-weight: 600;
  -webkit-transition: background .5s, color .5s;
  transition: background .5s, color .5s;
}

.navigation__link a:hover {
  color: white;
  background: #ff7b00;
}

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navigation {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.intro__address-box p {
  text-align: right;
}
/*# sourceMappingURL=main.css.map */

Это не должно иметь ничего общего с самой вашей страницей, скорее это звучит так, как будто ваши инструменты разработки прикреплены к нижней части вашего окна. Щелкните значок с тремя точками в правом верхнем углу инструментов разработчика и измените «Сторона док-станции» на «открепить в отдельном окне».

— 10.04.2019 13:35

Поскольку вы отрегулировали высоту в vh, vh означает переменную высоту, это означает, что высота будет регулироваться автоматически при изменении высоты окна. В этом случае ваши инструменты разработчика могут быть закреплены внизу, поэтому всякий раз, когда вы меняете высоту инструментов разработчика, изменяется высота контента на вашей странице. Чтобы предотвратить это, вы можете закрепить Инструменты разработчика справа (проще) или изменить CSS со значениями vh (сложно).

— 10.04.2019 14:15

html css

10.04.2019 13:27

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

138

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Инструмент разработки Chrome по умолчанию не является оверлеем, его ширина/высота берутся за пределы экрана дисплея. Поскольку ваш дизайн является адаптивным, он будет адаптироваться к размеру дисплея (это окно браузера без инструмента разработчика).

Решение: в меню инструмента разработчика выберите "Открепить в отдельное окно"

Скриншот: https://i.stack.imgur.com/zhWz7.png

10.04.2019 14:09

Ответ принят как подходящий

Это происходит из-за того, что для раздела .showcase установлена высота 70vh, которая зависит от высоты окна просмотра. Когда вы открываете Dev Tools, высота окна становится меньше, таким образом, 70vh становится меньше, чем при полном экране, таким образом перемещая галерею вверх.

Просто удалите height: 70vh; из .showcase, чтобы решить проблему. Фрагмент кода ниже:

      .header {
        background: #ecf0f1;
      }

      .header [class*='intro'] {
        padding: 2rem;
      }

      p {
        margin: 0;
      }

      .intro__welcome-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
      }

      .navbar {
        background: white;
      }

      .logo-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
      }

      .logo-box__motto {
        font-size: 16px;
        -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
        border-left: 1px solid rgba(88, 87, 87, 0.507);
        padding: 0 1rem;
        color: rgba(88, 87, 87, 0.507);
        font-weight: bold;
        line-height: 1.5;
      }

      .logo-box__image {
        padding-right: 1rem;
      }

      .logo-box__motto {
        width: 30%;
        text-transform: uppercase;
        font-size: 1.5rem;
      }

      .gallery {
        padding: 5rem 0;
      }

      .gallery .content {
        width: 40%;
        text-align: center;
        text-transform: uppercase;
        font-size: 2rem;
        margin: auto;
      }

      .gallery .content h2 {
        line-height: 1.5;
      }

      .m-v-30 {
        margin: 30px 0;
      }

      .content-links {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
            justify-content: space-around;
      }

      .anchor {
        text-decoration: none;
        color: white;
        font-weight: 600;
        display: inline-block;
        padding: 1rem 1.5rem;
        border-radius: 30px;
        text-transform: uppercase;
      }

      .anchor:hover {
        text-decoration: none;
        color: white;
      }

      .anchor.light-red {
        background: rgba(255, 0, 0, 0.658);
        margin-left: 7rem;
      }

      .anchor.orange {
        background: orange;
        margin-right: 7rem;
      }

      .carousel-container {
        height: 300px;
        border-radius: 10px;
        overflow-y: hidden;
      }

      .p-h-0 {
        padding: 0;
      }

      .cloud {
        height: 200px;
        width: 100%;
        background-image: url(/cloud.png);
        position: absolute;
        bottom: 0;
      }

      .showcase img {
        width: 100%;
        height: 100%;
      }

      .showcase {
        /* height: 70vh; */
        position: relative;
      }

      .header__tel-number {
        color: #ff7b00;
        font-weight: 700;
        font-size: 1.5rem;
      }

      .navigation__list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        list-style: none;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
      }

      .navigation__link a {
        display: inline-block;
        padding: 5px 10px;
        border-radius: 20px;
        text-decoration: none;
        text-transform: uppercase;
        color: rgba(44, 43, 43, 0.603);
        font-weight: 600;
        -webkit-transition: background .5s, color .5s;
        transition: background .5s, color .5s;
      }

      .navigation__link a:hover {
        color: white;
        background: #ff7b00;
      }

      .flex-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
      }

      .navigation {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
      }

      .intro__address-box p {
        text-align: right;
      }
      /*# sourceMappingURL=main.css.map */

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel = "stylesheet" href = "./main.css">
    <link href = "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel = "stylesheet">
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
    
    <title>Document</title>
</head>
<body>
    <header class = "header">
    <div class = "container">
    <div class = "row">
        <div class = "col-md-6 intro__welcome-box">
        <p class = "header__welcome-content">Welcome to our kids School!!</p>
        </div>

</div>
    </div>

    <div class = "navbar">
            <div class = "container">
                <div class = "row flex-container">
                            <h1 class = "logo-box">
                                <a href = "#">
                        <img class = "logo-box__image" src = "./images/logo.png" alt = "The logo">
                               </a>
                         <span class = "logo-box__motto"> Все начинается с детской мечты</span>
                        </h1>
                    <nav class = "navigation">
                        <ul class = "navigation__list">
                            <li class = "navigation__link"><a href = "">О Sunnyvale</a></li>
                            <li class = "navigation__link"><a href = "">Галерея</a></li>
                            <li class = "navigation__link"><a href = "">Персонал</a></li>
                            <li class = "navigation__link"><a href = "">Услуги</a></li>
                            <li class = "navigation__link"><a href = "">Контакты</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </header>

    <section class = "showcase">
        <div class = "container-fluid p-h-0">
            <div class = "row">
                <div class = "col-md-6">
<img src = "https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg" alt = "">
                </div>
                <div class = "col-md-6">
<div class = "showcase-content">
    <h2>Join Our Journey</h2>
    <p>of World Discovery</p>

    <a href = "">Find Out More</a>
</div>
                </div>
            </div>
        </div>
    </section>

    <section class = "gallery">
<div class = "container">
<div class = "row">

    <div class = "col-md-6">
        <div class = "content">
            <h2>
                Добро Пожаловать в галерею Sunnyvale
            </h2>
        </div>
        <div class = "content-links m-v-30">
                <a class = "anchor light-red" href = "">Узнать больше</a>
                <a class = "anchor orange" href = "">Смотреть Все</a>
            </div>

    </div>
    <div class = "col-md-6">
        <div class = "carousel-container">
            <div class = "owl-carousel room-carousel owl-theme">
                <img src = "https://www.newyorkpass.com/images/rebrand/prices_01.jpg" alt = "">
                <img src = "https://thenypost.files.wordpress.com/2017/04/new-york.jpg?quality=90&strip=all&w=618&h=410&crop=1" alt = "">

            </div>
        </div>
    </div>


</div>

</div>

    </section>


    <script
  src = "https://code.jquery.com/jquery-3.3.1.min.js"
  integrity = "sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8 = "
  crossorigin = "anonymous"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
  <script>
  $('.room-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:1
        }
    }
})
</script>
</body>
</html>

@mirzhal — Запустите фрагмент, нажмите Full page, откройте Инструменты разработчика и переключите height на элемент .showcase, чтобы увидеть разницу.

— 10.04.2019 14:15

спасибо за ваш ответ, и да, я удалил высоту 70vh, но столкнулся с той же проблемой. Но фрагмент, который вы изменили, работает нормально. ???

— 10.04.2019 14:55

@mirzhal - может быть, это потому, что у вас разные изображения, разного размера. Не могли бы вы предоставить несколько фиктивных изображений, возможно, используя dummyimage.com , во фрагмент кода, чтобы мы могли воспроизвести проблему?

— 10.04.2019 15:21

да Андрей после тщательного изучения кода оказалось что была проблема с лайв сервером не обновлялась страница после удаления height:70vh так что вы были правы. Посмотрите, Андрей, если у vh есть такие проблемы, мне следует избегать его использования и использовать px. Заранее благодарю за любезную помощь :)

— 10.04.2019 17:45

Пожалуйста, Андрей, мне очень нужен ваш профессиональный совет, так стоит ли мне воздержаться от использования vh. Я просто хотел создать витрину, а в некоторых туториалах видел, что vh, или я неправильно использовал vh?

— 11.04.2019 07:56

@mirzhal Я очень редко использую vh в CSS. Обычно вы можете делать большинство типов макетов без использования vh или vw. Очень часто проценты более полезны, когда речь идет о гибком дизайне. Тем не менее, если вы хотите использовать vh, убедитесь, что вы хорошо протестировали свое приложение, постоянно изменяя размер окна или изменяя область просмотра, чтобы убедиться, что ничего не изменилось.

— 12.04.2019 13:06

10.04.2019 14:13