Question

我有一个固定的菜单和侧边栏，以及一个绝对的主区域

我想要实现的是将min-width设置为主区域内的内容，并在其上设置滚动条x和y，以便我可以在其中导航

我尝试将overflow:auto添加到#main和overflow:hidden添加到body但滚动条没有显示在#main中，我不确定我是什么做错了：

这是jsfiddle：

这是代码：

<div id="sidebar">Sidebar</div>

<div id="menu">Menu</div>

<div id="main">

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

css：

html, body{
    height: 100%;
}

body{
    overflow: hidden;
}
#sidebar{
    width: 200px;
    position: fixed;
    background: blue;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    padding-top: 100px;
}

#menu{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 50px;
    background: red;
    color:white;
    z-index: 9999;
}

#main{
    position: absolute;
    left: 200px;
    top: 50px;
    right: 0;
    min-height: 100%;
    min-width: 1400px;
    height: 100%;

    overflow: auto;

}

Answer 1

问题是主要的div没有溢出，只是豁免窗口的边框。它只是更大。

您应该将主要边框设置为窗口边框（同时将height:100%更改为bottom:0，因为第一个是底部向下流动），并使用免费添加主要内部的可滚动div 维度（即它们可能很大），如下所示：

html,
body {
  height: 100%;
}
body {
  overflow: hidden;
}
#sidebar {
  width: 200px;
  position: fixed;
  background: blue;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 999;
  padding-top: 100px;
}
#menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: red;
  color: white;
  z-index: 9999;
}
#main {
  position: absolute;
  left: 200px;
  top: 50px;
  right: 0;
  bottom:0;
  overflow: scroll;
}
#scrollable {
  min-width: 1400px;
  min-height: 100%;
}

<div id="sidebar">Sidebar</div>

<div id="menu">Menu</div>

<div id="main">
  <div id="scrollable">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Answer 2

只需 FORCE 这种行为，试试这个：

<div id="main" style="overflow:scroll !important">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

将溢出自动添加到绝对定位的div

2 个答案: