Question

I have created a Bootstrap layout that has a fixed nav bar and a fixed sidebar so that the remaining span (the content span) will scroll vertically. However I want the content span to actually encompass a window header and a window – where the window header is static but the content of the window scrolls within the window.

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

I have posted the present code here http://jsfiddle.net/timburgess/CUGu8/

I’d appreciate any suggestions. I have tried a fixed position window header but the window content simply scrolls over it 🙁 which is not what I want.

Answer 1

I have worked this out and the core css is essentially:

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

The complete result is at:

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

For clarity, I have surrounded the main window with a border to emphasize it and embedded in it is a sub-window (again with a border) which allows for a header over the sub-window content. Content in the sub-window vertically scrolls if it overflows the available space and by using absolute positioning, the main window right and bottom borders are pinned to the edge of the browser.