带有滚动窗口的引导布局答案

【问题标题】：Bootstrap layout with scrolling window带有滚动窗口的引导布局
【发布时间】：2012-12-05 18:28:52
【问题描述】：

我创建了一个具有固定导航栏和固定侧边栏的 Bootstrap 布局，以便剩余的跨度（内容跨度）将垂直滚动。但是我希望内容跨度实际上包含一个窗口标题和一个窗口 - 其中窗口标题是静态的，但窗口的内容在窗口内滚动。

.sidebar-nav-fixed {
  padding: 9px 0;
  position: fixed;
  left: 20px;
  top: 78px;
  width: 250px;
}

.row-fluid > .span-fixed-sidebar {
  margin-left: 290px;
}

.main {
  margin-top: 80px;
}

.header {
  margin-top: 80px;
}

.threadwindow {
  height:  100%;
  overflow: auto;
  border: 1px solid #333;
}

我已经在http://jsfiddle.net/timburgess/CUGu8/这里发布了当前代码

如果有任何建议，我将不胜感激。我尝试了一个固定位置的窗口标题，但窗口内容只是在它上面滚动:-(这不是我想要的。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

我已经解决了这个问题，核心 css 本质上是：

#main {
  position: absolute;
  left: 300px;
  top: 100px;
  right:  0;
  bottom: 0;
  border: 2px solid #333;
}


.threadwindow {
  position: absolute;
  left: 0;
  top: 50px;
  right: 0;  
  bottom: 0;
  border: 1px solid #333;
  overflow-y: auto;
}

完整的结果在：

http://jsfiddle.net/timburgess/ZTt5M/

为了清楚起见，我用边框包围了主窗口以强调它，并嵌入了一个子窗口（同样带有边框），它允许子窗口内容上方的标题。如果子窗口中的内容溢出可用空间，它会垂直滚动，并且通过使用绝对定位，主窗口的右边框和下边框被固定到浏览器的边缘。

【讨论】：