Question

我有一个基本的网页，但是html或body元素太宽，它们使滚动条在底部弹出。 html / body标签的宽度保持在980px。这是在Chrome开发工具中发生的。选择自适应大小调整器。 html / body的尺寸不会低于980px。我担心小型设备将获得滚动条。

<html>
  <head>
    <style>
      .con { 
        display: flex;
        flex-direction: row;    
        width:95%; justify-content: space-around;   
      }
            
      html { width: auto; }
      #one {
        background-color: white; 
        width:600px; height: auto;
      }
      #two { 
        background-color: #aaa;
        width: 500px; height:300px;
      }
      img { width:100%; }

      @media (max-width: 1099px) {
        .con {
          flex-direction: column;
        }
        #one, #two { width:95%; margin: 0 auto; }                
      }
    </style>
    
  </head>
    
  <body>
    <div class="con">
      <div id="one"><img src="images/backwide.jpg"></div>
      <div id="two"><h1>Hello world</h1></div>
    </div>
  </body>  
</html>

我尝试设置html的宽度，我也尝试设置主体的宽度，但是没有任何效果。我试图使页面整洁。我知道这些元素太宽泛，但它们没有响应。这种情况发生在Chrome的F12响应大小调整器工具中。

Answer 1

尝试这样编辑。

#one {
      background-color: white;
      max-width: 600px;
      width: 100%;
      height: auto;
      float: left;
    }

    #two {
      background-color: #aaa;
      max-width: 500px;
      width: 100%;
      height: 300px;
      float: left;
    }

Answer 2

简单的方法是在html元素之外使用max-width，这样它们就不会滚动。我为所有body元素添加了包装器。

<html>
  <head>
    <style>
      .con { 
        display: flex;
        flex-direction: row;    
        width:95%; justify-content: space-around;   
      }
      
      .my-wraper{max-width:100%; width:100%; height:auto;}
            
      html { width: auto; }
      #one {
        background-color: white; 
        width:600px; height: auto;
      }
      #two { 
        background-color: #aaa;
        width: 500px; height:300px;
      }
      img { width:100%; }

      @media (max-width: 1099px) {
        .con {
          flex-direction: column;
        }
        #one, #two { width:95%; margin: 0 auto; }                
      }
    </style>
    
  </head>
    
  <body>
  <div class="my-wraper">
    <div class="con">
      <div id="one"><img src="images/backwide.jpg"/></div>
      <div id="two"><h1>Hello world</h1></div>
    </div>
    </div>
  </body>  
</html>

导致滚动条的html宽度

2 个答案: