Question

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

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

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

我已尝试过position，float，overflow，height / max-height，top，{{1}的所有组合我能想到的，bottom和left。在没有运气的情况下尝试了很多其他的东西。

非常感谢任何帮助。

CSS：

display

HTML：

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

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 */
}

Demo Here

滚动元素没有滚动条与CSS

1 个答案: