滚动元素没有滚动条与CSS

Question

这里有JSbin的视觉效果和代码.

左侧边栏,全高,固定位置,内容溢出,无需滚动条即可访问(这意味着没有overflow: scroll).我真的不想在Javascript中这样做.

几个月前,我用CSS overflow: hidden和其他东西完成了这个,现在我找不到代码或记住它是如何完成的.由于某种原因,谷歌对此毫无用处.这个侧边栏的内容位于我网站右侧的内容中.酒吧本身不仅可以垂直放在屏幕上.

我需要能够向下滚动这个对象,无论它是固定的还是绝对的,它必须一直跨越页面的高度.滚动主要内容和侧边栏是独立的.到目前为止,即使设置为绝对,包装器也会停止在页面底部之外.

我试过的每个组合position,float,overflow,height/ max-height,top,bottom,left和display我能想到的.在没有运气的情况下尝试了很多其他的东西.

任何帮助是极大的赞赏.

CSS:

#left-wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 3;
  max-width: 24em;
  height: 100%;  
  overflow: hidden;
  background-color: rgba(26,26,26,1);
}
#left-bar {
  max-width: 100%;
  max-height: none;
  position: relative;
}
#left-bar.sidebars .block {
  padding: 5%;
  border-right: none;
  margin:  5%;
  background-color: rgba(255,255,238,0.4);
  margin-bottom: 1.5em;
  font-size: 0.9em;
  overflow: hidden;
}
.sidebars .block ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebars h2 {
  padding: 0;
  margin: 5% 10% 0;
  font-size: 1.75em;
  text-transform: lowercase;
  font-weight: 400;
  text-align: right;
  /*border-bottom: 1px dashed #9c561b;  
  color: #9c561b;
  text-shadow:#130b08 0 1px 0;*/
}
#left-wrap a {
  color: #FDC;
}

HTML:

<div id="left-wrap">
  <div id="left-bar" class="sidebars">
      <div class="block">
        <h2>Title One</h2>
        <ul class="menu">
          <li>Link One</li>
          <li>Link Two</li>
          <li>Link Twenty-five</li>
          <li>Link Seventy</li>
          <li>Link One Hundred Fifty-two</li>
          <li>Link Zero</li>
        </ul>
      </div>
      <div class="block">
        <h2>Title Two</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>      
      <div class="block">
        <h2>Title Three</h2>
        <ul class="menu">
          <li>Link One</li>
          <li>Link Two</li>
          <li>Link Twenty-five</li>
          <li>Link Seventy</li>
          <li>Link One Hundred Fifty-two</li>
          <li>Link Zero</li>
        </ul>
      </div>
      <div class="block">
        <h2>Title Four</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>      
      <div class="block">
        <h2>Title Five</h2>
        <ul class="menu">
          <li>Link One</li>
          <li>Link Two</li>
          <li>Link Twenty-five</li>
          <li>Link Seventy</li>
          <li>Link One Hundred Fifty-two</li>
          <li>Link Zero</li>
        </ul>
      </div>
      <div class="block">
        <h2>Title Six</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>      
      <div class="block">
        <h2>Title Seven</h2>
        <ul class="menu">
          <li>Link One</li>
          <li>Link Two</li>
          <li>Link Twenty-five</li>
          <li>Link Seventy</li>
          <li>Link One Hundred Fifty-two</li>
          <li>Link Zero</li>
        </ul>
      </div>
      <div class="block">
        <h2>Title Eight</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>
    </div>
  </div>

Answer 1

如果你可以设置父级的高度和宽度，left-wrap你可以这样做：

#left-wrap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; /* Not sure why this is here */
  z-index: 3;
  max-width: 24em;
  max-height: none;  
  overflow: hidden;
  height:100%; /* Needs to be given a height and width as far as I know */
  width:1000px; /* They can be whatever dimensions you'd like, 'course */
  background-color: rgba(26,26,26,1);
}
#left-bar {
  max-width: 100%;
  max-height: 100%; /* Prevents it from auto sizing to its content */
  position:absolute;
  right: -20px; /* Shifts element to the right */
  padding-right: 10px; /* Uses padding to move element back into position */
  overflow-y: scroll; /* Makes sure that there is a scrollbar */
}

演示在这里