✔ Hintergrundfarbe soll sich beim Vergrößern des Browserfenster erweitern

[Jule_123]

Hallo,

ich habe mal wieder ein Problem. Meine Webseite hat links am Rand des Browserfenters einen Balken der mit Farbe gefüllt ist ( 48px breit). Dieser Balken bleibt auf jeder Seite auf der gleichen Position, er wechselt nur die Hintergrundfarbe. Dem Balken habe ich eine Größe von 100% gegeben so siehts im Moment aus:

#balken_rot{
width:48px;
float:left;
background-color:##970000;
background-repeat:repeat-y;
height:100%;
margin-top:124px;

Jetzt ist mein Problem wenn ich mein Browserfenster vergrößer, verlängert der Balken sich auch nur nicht bis nach ganz unten. Er hört bei einer bestimmten Größe auf und das verstehe ich nicht.

Ich hoffe jemand kann mir dabei helfen, wäre echt nett.

 

[shutdown]

probier mal folgendes

.body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}

 

[Maik]

Hi,

möglicherweise helfen dir mit dem "Floating-Modell" die vorgestellten Techniken von Three Columns, 3 Col Stretch oder Faux Columns weiter.

 

[Jule_123]

Also das was:

.body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}

funktionierte nicht. Da wo der Balken sich nicht bis unten erweitert, muss ich etwas öfter scrollen hat es vielleicht damit zu tun?

Lg Jule_123

 

[Maik]

Aufgrund der float:left-Deklaration vermute ich jetzt mal, dass es sich hierbei um ein mehrspaltiges Layout handelt, dessen linke Spalte bei zunehmenden Inhalt in der benachbarten Spalte nicht über die 100%-Höhe hinaus mitwächst.

Wie sich dieser Mißstand beheben lässt, kannst du auf den von mir verlinken Seiten nachlesen.

 

[Jule_123]

Achso ja das verstehe ich aber es klappt irgendwie nicht. Vielleicht verstehe ich auch nicht die Beispiele auf den einzelnen Webseiten. Ich weiß nicht wirklich was ich machen soll.

 

[Maik]

Zeig doch bitte mal den vollständigen Quellcode (HTML + CSS) der Seite.

 

[Jule_123]

Okay sorry


<div id="balken_rot"></div>
<div id="fliesstext"></div>

#balken_rot{
width:48px;
float:left;
background-color:#970000;
background-repeat:repeat-y;
height:100%;
margin-top:124px;
}


#fliesstext{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
float:left;
top:124px;
left:320px;
width:316px;
position:absolute;
}

so sieht er aus

 

[Maik]

Einen möglichen Lösungsansatz, der auf den "Faux-Columns" basiert und in einem übergeordneten Element ein Hintergrundbild als vertikal zu wiederholenden Spaltenhintergrund verwendet, hänge ich hier als ZIP-Datei an.

 

[Jule_123]

Dankeschön ich werde mich da jetzt mal durchboxen hoffe es klappt, sieht bei dir ja schon einmal gut aus. Danke nochmal

lg Jule_123