Html chrome中滚动条的媒体查询布局问题_Html_Css_Google Chrome_Scrollbar_Media Queries

Html chrome中滚动条的媒体查询布局问题

html css google-chrome

Html chrome中滚动条的媒体查询布局问题,html,css,google-chrome,scrollbar,media-queries,Html,Css,Google Chrome,Scrollbar,Media Queries,我在Chrome的媒体查询中遇到了一个奇怪的问题，这个问题相当模糊，但确实困扰着我，所以我希望在这里找到一个解决方案，或者至少确认我没有发疯基本上，当媒体查询开始时，页面将从内容从屏幕上滚动的状态（因此您有y轴滚动条）变为内容现在适合屏幕的状态（因此y轴滚动条不应出现）似乎有一小段时间，页面布局被呈现为滚动条在那里，即使滚动条不在那里（因此，试图填充整个屏幕的内容在这段时间内不会显示）我已经建立了一个简单的页面来展示这个问题。它包含两个浮动div，当媒体查询以小于500px的宽度启动时，这些

我在Chrome的媒体查询中遇到了一个奇怪的问题，这个问题相当模糊，但确实困扰着我，所以我希望在这里找到一个解决方案，或者至少确认我没有发疯

基本上，当媒体查询开始时，页面将从内容从屏幕上滚动的状态（因此您有y轴滚动条）变为内容现在适合屏幕的状态（因此y轴滚动条不应出现）似乎有一小段时间，页面布局被呈现为滚动条在那里，即使滚动条不在那里（因此，试图填充整个屏幕的内容在这段时间内不会显示）

我已经建立了一个简单的页面来展示这个问题。它包含两个浮动div，当媒体查询以小于500px的宽度启动时，这些div被设置为不再浮动，并具有更大的宽度-此时标题栏也从蓝色变为红色（为了清晰起见）


媒体查询Chrome滚动条问题
html，
身体
{
保证金：0；
填充：0；
}
.标题
{
背景颜色：蓝色；
填充：10px；
颜色：白色；
字体系列：Helvetica、Arial、无衬线字体；
}
.内容
{                
背景色：#F5；
边框：1px实心#e3；
浮动：左；
宽度：40%；
利润率：20px；
}
@介质（最大宽度：500px）{
.标题
{
背景色：红色；
}
.内容
{
浮动：无；
宽度：90%；
}
}
标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。在nec中，前庭侧的门上有一层玻璃。悬钩子。拉齐尼亚门前无直径保险丝。毛里斯·拉奥里特·奥奇·维勒·努拉（Mauris laoreet orci vel nullac rhoncus diam accumsan）是一位伟大的领袖。我是莫里斯·米，我是利古拉将军。埃蒂亚姆·阿库·阿库（Etiam arcu arcu），港口id车辆，维韦拉（viverra）非奥古斯（augue）。莫里斯·劳里特·弗林尼利亚·坦普斯。目前的精英们，生活中的小人物，弗林尼利亚·内克·图皮斯（fringilla nec turpis）。Suspendisse eget ipsum和sem Egesta ultricies。这是一种全新的饮食方式。埃蒂亚姆·阿库·阿库（Etiam arcu arcu），港口id车辆，维韦拉（viverra）非奥古斯（augue）。莫里斯·劳里特·弗林尼利亚·坦普斯。目前的精英们，生活中的小人物，弗林尼利亚·内克·图皮斯（fringilla nec turpis）。Suspendisse eget ipsum和sem Egesta ultricies。这是一个非常重要的元素，因为它是一个非常重要的元素，它是一个非常重要的元素。莫里斯·劳里特·弗林尼利亚·坦普斯。目前的精英们，生活中的小人物，弗林尼利亚·内克·图皮斯（fringilla nec turpis）。Suspendisse eget ipsum和sem Egesta ultricies。这是一种全新的饮食方式。
毛里斯的阿利夸姆·奎斯·阿库阿利夸姆·尤特·毛里斯的阿利夸姆。奎斯克特托尔欧盟马萨权杖车。Morbi velit直径，在placerat vel处有一个egestas，有一个空。奥古斯之家万岁，阿梅特之家万岁，再见。埃蒂亚姆·阿库·阿库（Etiam arcu arcu），港口id车辆，维韦拉（viverra）非奥古斯（augue）。莫里斯·劳里特·弗林尼利亚·坦普斯。目前的精英们，生活中的小人物，弗林尼利亚·内克·图皮斯（fringilla nec turpis）。Suspendisse eget ipsum和sem Egesta ultricies。基本元素

若要复制，请在大于500px宽（蓝色标题）的窗口中打开上述链接，并在仅允许内容从页面上滚动的高度打开，然后缓慢减小窗口的宽度，直到窗口变为红色（即宽度小于500px）。假设窗口的高度导致未浮动的div不再需要滚动条（反之亦然）-在红色和蓝色标题之间的转换点（即媒体查询变为活动状态）您应该注意到，在很短的一段时间内，红色标题并没有填充整个视口宽度。

我认为Chrome在这里进入无限循环。当你在500px以下一点的时候，他移除了垂直滚动条，但是在移除滚动条之后，窗口的宽度又回到了500px以上，他对这个宽度应用了CSS，而这个宽度又需要垂直滚动条，我们又回到了开始的位置。。。所以无限循环。基本上，Chrome只是通过留下垂直滚动条使用的空间来保护自己不受无限循环的影响

据我所知，您可以完全删除滚动条，即overflow:hidden on body（但我想这对99%的网站没有多大帮助），或者使用overflow-y:scroll在body上始终打开滚动条

编辑：

也许您可以尝试删除body标记上的滚动条，但使用overflow-y:scroll将所有内容封装在一个div中。尽管div和body一样宽，但它似乎是这样工作的，在我的测试中并没有任何问题。这将需要将此div设置为屏幕的100%高度，尽管可能是这样。

注意：最新版本的Chrome不再出现这种怪癖/问题

  <!DOCTYPE html>
  <html>
  <head>

      <title>Media Query Chrome Scrollbar issue</title> 
      <style type="text/css">

      html,
      body 
      {
         margin:0;
         padding:0;
      }

      .header
      {
        background-color: blue;
        padding: 10px;
        color: white;
        font-family: Helvetica, Arial, sans-serif;
      }

      .content
      {                
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;              
        float: left;
        width: 40%; 
        margin: 20px; 
      }

      @media (max-width: 500px) {

        .header
        {
          background-color: red;
        }

          .content
          {
            float:none;
            width: 90%;
          }
      }
      </style>

  </head>

  <body>

  <div class="header">
    Header
  </div>

  <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec purus ut quam vestibulum porta sed ultrices velit. Suspendisse dapibus justo id ligula iaculis cursus. Fusce non diam ut ante porta lacinia id vel nisl. Mauris laoreet orci vel nulla imperdiet ac rhoncus diam accumsan. Quisque sed mauris mi, sollicitudin commodo ligula. Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum. Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum.Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum.
  </div>

  <div class="content"> Aliquam in mauris quis arcu aliquam aliquam eu ut mauris. Quisque ut tortor eu massa scelerisque vehicula. Morbi velit diam, egestas at placerat vel, tincidunt a nulla. Vivamus arcu augue, vulputate at elementum sit amet, adipiscing quis odio. Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum
  </div>

  </body>
  </html>