堆栈内存溢出
  简体   繁体   English

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

[英]The website layout changes as I move Google developer tools window upwards

 原文  2019-04-10 11:27:57  5   2    html/ css

问题描述

I faced the issue with the layout of website being changed by the Google developer tool window which opens when you click F12. 我遇到的问题是，当您单击F12时，Google开发人员工具窗口会更改网站的布局。 So, to be more clear, when I click F12, the window appears but as I move the window upwards the layout gets changed, that is, gallery section reacts to the window and also moves upwards. 因此，更清楚地说，当我单击F12时，会出现该窗口，但是当我向上移动窗口时，布局会发生变化，也就是说，图库部分会对窗口做出反应，并且也会向上移动。 I do not even know what is causing such problem. 我什至不知道是什么引起了这样的问题。 I really need your help. 我真的需要你的帮助。 Here is the code I have: 这是我的代码： 

<!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 个解决方案

解决方案1
 1  2019-04-10 12:09:26

The Chrome development tool is not an overlay by default, it's width/height is taken off the display screen. Chrome开发工具默认情况下不是叠加层，它的宽度/高度不显示在显示屏上。 Since your design is responsive, it will adapt to the display size (which is browser window minus developer tool). 由于您的设计具有响应能力，因此它将适应显示尺寸（浏览器窗口减去开发人员工具后的大小）。

Solution: in the developer tool's menu, select "Undock into separate window" 解决方案：在开发人员工具的菜单中，选择“取消停靠到单独的窗口中”

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

解决方案2
 1 已采纳  2019-04-10 12:13:15

This is happening because the .showcase section has the height set to 70vh , which is relative to the viewport-height. 发生这种情况是因为.showcase部分的高度设置为70vh ，相对于视口高度。 When you open the Dev Tools, the height of the window gets smaller, thus 70vh becoming less than with the full screen, thus moving the gallery upwards. 当您打开开发工具时，窗口的高度会变小，因此70vh变得比全屏时要小，从而使图库向上移动。

Simply remove height: 70vh; 只需移除height: 70vh; from .showcase to fix the issue. 从.showcase解决此问题。 Code snippet below: 下面的代码段： 

  .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; } .mv-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; } .ph-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 ph-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 mv-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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 HTML 中向上移动图像？ - How can I move an image upwards in HTML? CSS选择器图像未显示在网站横幅或Chrome的“开发人员工具”窗口中 - CSS selector image not displaying in website banner or in Chrome's Developer Tools window 仅 CSS：当宽度变化时向上移动 flexbox 的 2. 项目 - CSS only: Move the 2. item of a flexbox upwards when the width changes 如何删除开发人员工具更改冗余 - How to remove Developer tools changes redundancy 除非使用开发人员工具，否则网站无法正确缩放 - Website not scaling correctly unless using developer tools 如何保存在SharePoint 2013中使用Internet Explorer开发人员工具所做的HTML更改？ - How can I save HTML changes I made using Internet Explorer Developer Tools in SharePoint 2013? 移动网站在 chrome 的“开发者工具”中看起来很棒，但是当我打开网页时它就坏了 - Mobile website looks great in chromes "developer tools" but is broken when I open the webpage 自行编辑Google Chrome开发人员工具 - Editing the Google Chrome Developer Tools Itself 参与IM更改网站布局 - Envolve IM Changes Website Layout 如何防止用户更改开发人员工具中textarea的最大长度？ - How to prevent user changes the maxlength of textarea in developer tools?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM