小编Der*_*yck的帖子

我正在编写一个基本上只是一个首选项对话框的应用程序,就像Visual Studio本身使用的树视图首选项对话框一样.应用程序的功能只是从串行设备到文件的数据传递.它在将数据写入文件之前对数据执行许多转换,因此应用程序的GUI只是决定这些转换应该是什么的所有设置.

设计/编码树视图首选项对话框的最佳方法是什么？我一直在做的方法是在左侧建立一个带有停靠树控件的主窗口.然后我一直在创建对应于树的每个节点的容器控件.选择节点后,应用程序会将该节点的相应容器控件带到前面,将其移动到正确的位置,并在主窗口中将其最大化.在设计它时,这似乎非常非常笨重.它基本上意味着我在设计时间之外有超过主窗口边缘的大量容器控件,我必须继续滚动主窗口以便使用它们.我不知道这是否完全有道理我写这个,但也许这个视觉我正在谈论的将更有意义:

基本上我必须使用这个庞大的表单,在整个地方使用容器控件,然后进行一系列运行时重新格式化以使其全部工作.这似乎是很多额外的工作.我是以完全愚蠢的方式做这件事的吗？是否有一些"明显的"更简单的方法来做到这一点,我错过了？

这里有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 …