0

I tried this:

<div id="fixed-navigation">...<div>

<div id="content">...<div>

and the CSS:

#fixed-navigation {
  position: fixed;
  width: auto;
  height: 100%;
  background: red;
  overflow-y: scroll;
}

#content {
  background: yellow;
}

See: http://codepen.io/zssz/pen/LGEJOJ

But this hides part of the content div below the fixed div, and setting an arbitrary margin-left or something on #content would just ignore the variable auto width on #fixed-navigation.

So what's the right CSS way to accomplish this seemingly simple use case? (I do want the fixed navigation to be fixed, that is it must always stay on the left side while scrolling through the content)

EDIT: Oh sorry, and I forgot to mention it should work in the majority of actual browsers out there including IE9, so alas not flexbox to the rescue.

user777
  • 906
  • 5
  • 16
  • Without flexbox you're most likely going to need JS. I recently answered a similar question: http://stackoverflow.com/q/33991757/3597276 – Michael Benjamin Dec 08 '15 at 18:32

1 Answers1

-1

Here's a flex box implementation:

http://codepen.io/achisholm/pen/OMPBmp

The essential stuff is...

html, body {
  height: 100%;
}

display: flex on the container, in this case body, then...

#fixed-navigation {
  flex: 0 0 150px;
  height: 100%;
  overflow-y: scroll;
}
#content {
  flex: 1 0 auto;
  height: 100%;
  overflow-y: scroll;
}
Alistair Chisholm
  • 608
  • 6
  • 20
  • Thanks this is great, but alas I need to support the majority of actual browsers out there, So flexbox isn't an option yet, too bad. See my edit. – user777 Dec 08 '15 at 18:01
  • Global browser support for flex is currently over 95% and usage of IE 9 is at 0.94% fwiw ;) http://caniuse.com/#feat=flexbox – Alistair Chisholm Dec 08 '15 at 18:04
  • Yeah good point, I do need IE9 though :( C'mon please don't tell me this isn't possible without flexbox :( – user777 Dec 08 '15 at 18:05