3 Container, links & rechts fixiert, mitte liquid

[lissylucky]

Hallo Zusammen,

ich habe 3 Container.
Der linke und rechte sind fixiert, haben jeweils eine Breite von 100px.
Der Container in der Mitte ist liquide sowohl in die Breite als auch in die Höhe.

Leider kriege ich das nicht zufriedenstellen hin. Hat jemand von Euch eine Idee?

.bar_left, .bar_right {
    background-color: grey;
    width: 100px;
    height: 100%;
    position: fixed;
}

.bar_left {
    float: left;
}

.bar_right {
    float: right;  
    margin-left: -100px;
    background-color: red;
}

.container {
    width: 100%;
    height: 100%;
    background-color: pink;
    margin: 60px 300px 0 300px;
}

 

[SpiceLab]

Der linke und rechte sind fixiert
[...]
Leider kriege ich das nicht zufriedenstellen hin. Hat jemand von Euch eine Idee?

.bar_left, .bar_right {... position: fixed;}
.bar_left {float: left;}
.bar_right {float: right; ...}

position:fixed erfordert selbstverständlich Positionsangaben (hier: top, left, right) - keine float-Regelung

/* Grundeinstellungen */
* {margin:0;padding:0}
html,body {height:100%}
/* korrigiertes CSS */
.bar_left, .bar_right {
  background-color: gray; /* Farbname heißt nicht "grey" */
  width: 100px;
  height: 100%;
  position: fixed;
  top:0 /* Startposition von oben */
}
.bar_left {
  /*float: left;*/ /* auskommentiert = deaktiviert */
  left:0 /* Startposition von links */
}
.bar_right {
  /*float: right;*/ /* auskommentiert = deaktiviert */
  /*margin-left: -100px;*/ /* auskommentiert = deaktiviert */
  right:0; /* Startposition von rechts */
  background-color: red
}
.container {
  /*width: 100%;*/ /* Breite ergibt sich durch margin-right & -left */
  min-height: 100%; /* anstatt height -> Hintergrund für scrollbaren Inhalt bleibt erhalten */
  background-color: pink;
  margin: 0 100px
}

Demo #1: http://jsfiddle.net/spicelab/o0hh5ycy/
("Grundmodell", ohne scrollbaren Inhaltsumfang in .container)
Demo #2: http://jsfiddle.net/spicelab/4tyf8m23/
(Scrollbarer Inhalt überschreitet Viewporthöhe height:100% , .container-Hintergrund wird aber wg. min-height:100% nicht abgeschnitten)
Demo #3: http://jsfiddle.net/spicelab/zoha1qqx/
(Auswirkung beim Scrollen für .container-Hintergrund mit height:100% anstatt min-height:100%)

[edit]jsfiddle-Demos hinzugefügt[/edit]​