Google開発者ツールウィンドウを上に移動すると、Webサイトのレイアウトが変わります

debugcn 投稿 Dev

mirzhal

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 */

アンドレイ

これは、.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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-10

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

Google開発者ツールウィンドウを上に移動すると、Webサイトのレイアウトが変わります

Google開発者ツールウィンドウを上に移動すると、Webサイトのレイアウトが変わります

ウィンドウを閉じるときにブレークポイントを設定する方法、または開発者ツールウィンドウが閉じないようにする方法は？

グーグルプレイ開発者アカウントを別のグーグルアカウントに移動する方法は？

ウィンドウのサイズを変更すると、HTMLテーブルが移動します

ウェブ開発、ウェブサイトのディレクトリ構造に関する初心者レベルのアドバイスが必要です

ユーザーがウィンドウのサイズを変更すると、Pythontkinterウィジェットのサイズが不均一になります

ウィンドウの移動とサイズ変更を可能にするpython関数はありますか？

ウィンドウのサイズを変更すると、幅100％のレスポンシブHTMLレイアウトが折りたたまれる

ウェブサイトのリンクをアドレスバーに貼り付けるとき、またはウェブサイトに移動するハイパーリンクをクリックするときに、レンダリングされたコンテンツを修正する方法

ブラウザウィンドウのサイズが変更されたときにサイトを別のページに移動させる方法はありますか？

イベントがサブビューになると、OS X 10.8+のボーダレスウィンドウでカスタムウィンドウの境界線に対してユーザーのマウス駆動の移動またはサイズ変更を開始するにはどうすればよいですか？

Ubuntu 19.10にアップグレードした後、ウィンドウのサイズを変更したり、ウィンドウをドラッグしたりすると問題が発生します

電子メールのURLをクリックすると、クライアントはブラウザウィンドウに切り替わります

アンドロイドのwebViewはwebviewの代わりにwebでウェブサイトを開きます

MPV：ウィンドウの位置とサイズを取得しますか？またはウィンドウ移動/サイズ変更されたイベント？

Word でレスポンシブ コンテンツを作成する方法はありますか? - ウィンドウの再フォーマット/フローでコンテンツをウィンドウ サイズの変更にするには?

ウィンドウのサイズを変更すると、上部を基準にしたdivが上に移動しますか？

ツールバーを相対レイアウトの一番上に移動します

モーダルウィンドウを開いたり閉じたりすると、ウィンドウのサイズ変更がトリガーされます

ウィンドウのサイズを変更するとQRubberBandが移動します

Firefox-開発者ツールをメインウィンドウに再接続します

ウィンドウのサイズを変更すると、画像の位置が変わります

ウィンドウのサイズを変更すると、HTMLの位置が変わります

wmctrlがスクリプト内のウィンドウのサイズ変更/移動に失敗する

ウィンドウのサイズが変更されるとアイテムが移動する

後でウィンドウを閉じるだけの場合は、シークレットウィンドウでWebサイトからログアウトする必要がありますか？

Pythontkinter-ユーザーがウィンドウを展開したときにウィジェットのサイズを変更する方法

QTレイアウトマネージャーは、ウィンドウが移動するまでウィジェットを非表示にするとスペースを回復しません

VisualStudioツールウィンドウのタブに単語の代わりにアイコンを表示する

CSSスタイル-ブラウザウィンドウのサイズが変更されると、要素は中央に向かって移動します

Word でレスポンシブコンテンツを作成する方法はありますか? - ウィンドウの再フォーマット/フローでコンテンツをウィンドウサイズの変更にするには?