# geteilter Hintergrund durch zwei Divs, die 100% hoch sind



## Noeden (22. Februar 2012)

Hallo Leute,
komische Sache, ich bekomme es nicht hin. 

folgendes Markup:


```
<div id="outerwrap">
  <div id="backgroundLeft"></div>
  <div id="backgroundRight"></div>
  
  <div id="content">
    <div id="innerContent">
    </div>
  </div>
</div>
```


Also ich möchte den content mittig positionieren und hinter dem Contentdiv links einen Verlauf mit einer 1px breiten sich immer wiederholenden Grafik machen und rechts daneben mit einer anderen Grafik. Diese endet dann in einem Farbton, der als Background-color fortgeführt wird. Ich hoffe ihr versteht was ich meine. Der Hintergrund soll dann mitscrollen, wenn ich auf der Seite nach unten scrolle. Bei meiner CSS-Notation ist der Hintergrund aber immer nur so hoch wie der am Anfang sichtbare Bereich. Das liegt bestimmt am position: absolute;. Wie schaffe ich es, dass #backgroundLeft und #backgroundRight so hoch sind wie #outerwrap, aber dennoch links und rechts (in z-Richtung) unter content liegen.

CSS: 


```
html, 
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

#outerwrap {
  width: 100%;
  min-height: 100%;
}

#backgroundLeft {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  background: url(../img/layout/bg_grad_dark.png) repeat-x #333;
  width: 50%;
}

#content {
  position: relative;
  width: 900px;
  margin: 0 auto;
}

#innercontent {
  height: 1000px;
}
```


Für Hilfe bin ich sehr dankbar


----------



## Noeden (22. Februar 2012)

Ingrid weiß es 

```
#outerwrap {
  position: relative;
}

#backgroundLeft {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
```


----------



## SpiceLab (22. Februar 2012)

Noeden hat gesagt.:


> Ingrid weiß es


Ingrid oder Ingrid? :suspekt:


----------



## Noeden (22. Februar 2012)

Die erste war mir behilflich


----------



## Noeden (23. Februar 2012)

Ist leider doch noch nicht erledigt. Da gibt es nämlich ein Problem und ich glaube, das kann man ohne Javascript nicht lösen. 

Der body soll:
 -mindestens so hoch sein wie das Fenster
und
 -mindestens so hoch sein wie der höchste Inhalt.

Also gebe ich ihm min-height: 100% und height: auto. Denn wenn height gesetzt wäre, würde er nur so hoch sein wie das Browserfenster. (Bei zu langem Inhalt würde der Inhalt herausragen und mit overflow hidden würde man den Inhalt leider nur abschneiden).

Genau das gleiche gilt für den outerwrap. 

Das bedeutet jetzt, dass der Hintergrund nur so weit geht, wie das content-div hoch ist. (Das kann ich nicht mit 100% height versehen, weil in der rootline kein Element eine vergebene Höhe hat. Warum habe ich ja schon erklärt.)

Sehe ich das richtig, dass meine einzige Lösung darin besteht, dass ich dem content eine feste min-height gebe, die dann für einige Auflösungen zu groß und für einige zu klein ist? Und ich dann den Feinschliff nur mit Javascript machen kann?

Danke


----------



## djheke (23. Februar 2012)

Du mußt html auch height:100% zuweisen.
Zu deinen Grafiken. Da solltest du mal nach Faux Columns googeln, oder du liest hier.
http://www.gipspferd.de/css/anleitung/a19/a19.php

mfg
Henry


----------

