HTML CSS错误的缩放行为

Question

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

div#container
{
        /*overflow: hidden;*/
        max-width: 98vw;
        height: 100vh;
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto -10px;
        overflow:auto;

        }
div#main_outer {
    min-width:100%;
    max-width:100%;
    overflow: scroll;
    height: 90%;
    }
div.main {
    position:relative;
    max-width: 100%;
    min-width: 1800px;
    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%;
    height: 10%;
    width: 1800px;
    height: 80px;
    display: table;
    margin: 0 auto;
    background-color: #ffcccc;}

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

Answer 1

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

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;
}

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

Answer 2

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;
}

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

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