5

JSbin 在这里用于视觉和代码。

左侧边栏，全高，固定位置，需要在没有滚动条的情况下访问的内容溢出（这意味着 no overflow: scroll）。我真的不想在 Javascript 中这样做。

几个月前的某个时候，我用 CSSoverflow: 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>
4

1 回答 1

4

如果您可以设置父级的高度和宽度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 */
}

在这里演示

于 2013-10-19T14:31:54.630 回答