HTML CSS错误的缩放行为

Question

我目前正坐在网站布局上，横幅固定在页面顶部，您可以滚动内部div。但是，当我放大浏览器（strg +＆＃39; +＆＃39;）时，横幅溢出容器，而容器变为x-scrollable。内部div溢出并且可以滚动。 Fiddle 的CSS：

device

我想要的是横幅和内部div总是具有相同的宽度，当CONTAINER在溢出时在x方向上变得可滚动 ...

Answer 1

＆＃13;

＆＃13;

div#container {
    max-width: 98vw;
    height: 100vh;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto -10px;
    overflow:auto;
}
div.main {
    position:relative;
    max-width: 100%;
    width: 100%;
    min-height: 90%;
    width: 1800px;
    height: 800px;
    display: table;
    margin: 0 auto;
    overflow:auto;
}
div#banner {
    position:sticky;
    top:0;
    left:0;
    right:0;
    z-index:1;
    font-size:25px;
    max-width: 100%;
    width: 1800px;
    height: 80px;
    display: table;
    margin: 0 auto;
    background-color: #ffcccc;
}

＆＃13;

 <div id="container">
   <div id="banner">
   ...
   </div>
<div id="main_outer">
  <div class="main">...<div style="width:360px;height:360px; background-color:white; position:relative;bottom:2%; top:2%; left:40%;">
  </div></div>
  <div class="main">
  ..</div>
 </div>
 </div>

＆＃13;

＆＃13;

＆＃13;

这解决了这个问题，因为我理解你想要的是什么

Answer 2

没有得到你想要的，但据我所知，你可能想要这样：

＆＃13;

＆＃13;

div#container {
    max-width: 98vw;
    height: 100vh;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto -10px;
    overflow:auto;
}
div.main {
    position:relative;
    max-width: 100%;
    width: 100%;
    min-height: 90%;
    width: 1800px;
    height: 800px;
    display: table;
    margin: 0 auto;
    overflow:auto;
}
div#banner {
    position:relative;
    top:0;
    left:0;
    right:0;
    z-index:1;
    font-size:25px;
    max-width: 100%;
    width: 1800px;
    height: 80px;
    display: table;
    margin: 0 auto;
    background-color: #ffcccc;
}

＆＃13;

<div id="container">
    <div id="banner">
      ...
    </div>
    <div id="main_outer">
      <div class="main">...
        <div style="width:360px;height:360px; background- color:white; position:relative;bottom:2%; top:2%; left:40%;"></div>       </div>
      <div class="main">
      ..</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;