Fixed top bar + 100% height fixed sidebar?

StackOverflow https://stackoverflow.com/questions/22401876

Pergunta

I'm wondering how to make a proper layout for fixed navbar markup with sidebard. What I'm trying to archieve:

  1. Fixed navbar
  2. Fixed right column (sidebar)
  3. Fluid left coumn (content)

Sidebar

Sidebar height is always 100% of widnow height except navbar. When sidebar content height is more than sidebar height, I need to scoll it's content. In the endpoint of sidebar scroll (then sidebard is scrolled to it's bottom) I wish main content to start scrolling and vice versa.

Here'is the layout:

enter image description here

What I've got now: http://jsfiddle.net/MNN28/1/

html,
body {
  width  : 100%;
  height : 100%;
}
body {
  background-color: #f4f4f4;
}
.container {
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.navbar {
  position : fixed;
  height   : 45px;
  width    : 100%;
  z-index  : 9;
}
.main {
  position : absolute;
  top      : 45px;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.main-container {
  overflow : scroll;
  width    : 1200px;
  margin   : 0px auto;
}
.main-container-center {
  width    : 600px;
  height   : 100%;
  float    : left;
  overflow : scroll;
}
.main-container-right {
  position    : fixed;
  width       : 600px; 
  height      : 100%;
  float       : left;
  margin-left : 975px;
  overflow    : scroll;
}

There are two main issues in this markup:

  1. I dont want to have separate scrollbar for content column, is should be native page scrolling.
  2. Some text both in content and in sidebar area is cutted even after scroll (I suppose it's because of navbar height).

How to correct my markup to make it work as expected? Thanks.

Foi útil?

Solução

I think this is what you descriped. You can scroll your <body> content like alwas and have a max-height fixed sidebar.

http://jsfiddle.net/MNN28/2/

.container {
  width: 100%;
  height: 100%;
}
.navbar {
  position: fixed;
  height: 45px;
  width: 100%;
  background-color: #262626;
  z-index: 9;
}
.main {
  position: relative;
  top: 45px;
  width: 100%;
  bottom:0;
}
.main-container {
  width: 1200px;
  margin: 0px auto;
  background-color: #e9e9e9;
}
.main-container-center {
  width: 600px;
  top: 45px;
  background-color: #e5e5e5;
}
.main-container-right {
  position: fixed;
  background-color: #d9d9d9;
  width: 600px;
  bottom:0;
  margin-left: 600px;
  overflow: auto;
  top: 45px;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top