Question

我有一个带有固定页眉和页脚以及可滚动内容的flexbox布局。页眉和页脚有固定的高度。

＆＃13;

html,
body {
  height: 100%;
  /*overflow: hidden;*//*it makes things somewhat better...*/
}
body {
  margin: 0px;
  background-color: LightGrey;
}
#container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: SandyBrown;
}
#header {
  height: 40px;
  background-color: LightSkyBlue;
}
#center {
  background-color: PapayaWhip;
  flex: 1;
  display: flex;
  overflow-y: hidden;
}
#footer {
  height: 50px;
  background-color: Aquamarine;
}
#menu {
  width: 200px;
  background-color: LightSalmon;
  margin-right: 20px;
}
#menu div {
  height: 30px;
  margin-bottom: 10px;
  background-color: Crimson;
  position: relative;
}
#menu div span {
  display: none;
}
#menu div:hover span {
  display: block;
  width: 200px;
  height: 20px;
  background-color: black;
  color: white;
  z-index: 100 !important;
  position: absolute;
  top: 10px;
  left: 50px;
}
#content {
  flex: 1;
  background-color: LightGreen;
  overflow-y: auto;
}

＆＃13;

<div id="container" class="component">
  <div id="header" class="component"></div>
  <div id="center" class="component">
    <div id="menu">
      <div>o1<span>bla 1</span>
      </div>
      <div>o2<span>bla 2</span>
      </div>
    </div>
    <div id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in quam eleifend, feugiat est vitae, pretium ligula. Integer vel interdum diam, non auctor ligula. Ut vel semper justo. Fusce augue nunc, aliquam id hendrerit vitae, gravida vel metus.
        Maecenas placerat pretium gravida. Phasellus tempus facilisis felis, id ultricies magna convallis vitae. Duis posuere at quam sit amet consectetur.</p>
      <p>In lorem massa, tristique in diam at, condimentum posuere tellus. Aliquam malesuada facilisis nunc, id consectetur neque bibendum varius. Quisque consectetur turpis nec purus lobortis efficitur. Nunc ultrices et metus sed lobortis. Donec tincidunt
        mi nec neque dignissim, sit amet pretium leo eleifend. Aenean vehicula, nibh a pretium faucibus, est ligula tempor enim, quis feugiat mi orci in orci. Cras facilisis fermentum dolor in vestibulum. Aenean est lorem, fringilla sit amet velit sit
        amet, porttitor tincidunt ligula.</p>
      <p>Pellentesque a odio enim. Fusce rutrum, neque pretium placerat bibendum, lacus velit volutpat orci, sed faucibus risus purus et lacus. Suspendisse tempor urna erat, eget egestas ante iaculis eget. Cras ut tellus eu elit posuere efficitur et id magna.
        Aliquam sagittis leo eget ipsum ultricies tempus. Donec porta odio at euismod tincidunt. Ut sagittis vel urna in congue. Pellentesque viverra ante ut lacus imperdiet lobortis. Praesent placerat placerat egestas. Vivamus egestas metus id consectetur
        varius. Curabitur vel nisi vitae sapien pretium malesuada.</p>
    </div>
  </div>
  <div id="footer" class="component"></div>
</div>

＆＃13;

这适用于所有主流浏览器（Chrome，Firefox，IE 10，IE 11），但在Opera中有一个奇怪的差距＆＃34;在center和footer个容器之间。实际上有两个滚动条而不是一个。只有在content有滚动条时才会发生接缝。外部滚动条似乎位于body或html上。如果我在这些元素上设置overflow: hidden，页面仍会呈现两个滚动条，但在首次悬停menu元素后，外部滚动条会消失。请参阅this fiddle并使用结果框的高度。

如何解决这个问题，使其在所有浏览器中都能正常运行，包括Opera（最新版）。

修改以下是一些屏幕截图，显示了所描述的行为（页脚顶部的橙色间隙），同时使用Opera进行浏览：

为什么这个flexbox固定的页眉/页脚布局在Opera中被破坏了？

0 个答案: