当我向上移动Google开发人员工具窗口时，网站布局也会发生变化

时间：2019-04-10 11:27:58

标签： html css

我遇到的问题是，当您单击F12时，Google开发者工具窗口会更改网站的布局。因此，更清楚地说，当我单击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 */

2 个答案:

答案 0 :(得分：1)

Chrome开发工具默认情况下不是叠加层，它的宽度/高度不显示在显示屏上。由于您的设计具有响应能力，因此它将适应显示尺寸（浏览器窗口减去开发人员工具后的大小）。

解决方案：在开发者工具的菜单中，选择“取消停靠到单独的窗口中”

屏幕截图：https://i.stack.imgur.com/zhWz7.png

答案 1 :(得分：1)

之所以发生这种情况，是因为.showcase部分的高度设置为70vh，这是相对于视口高度的。当您打开开发工具时，窗口的高度变小，因此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>

相关问题
最新问题