div bis zum unteren Rand des Browserfenster

[wapplegraph]

Hallo

Ich arbeite gerade an einer neuen Webseite und habe nun eine Frage/ein Problem:

<div id="wrapper_top">
	<div id="verlauf_top"></div>
</div>

<div id="balken_h">
	<div id="bilder_top">
		<div id="galerie"></div>
		<div id="einzel_bild"></div>
	</div>
</div>

<div id="wrapper">
	<div id="wrapper_left">
		<div id="navigation">
		</div>
		<div id="content">
			Hier kommt der Inhalt.
		</div>
	</div>
	
	[COLOR="Red"]<div id="balken_v">
	</div>[/COLOR]
</div>

HTML-Quelltext

Ich möchte, dass das div #balken_v einfach immer bis an den unteren Rand vom Browserfenster geht.

div#balken_v
		{
		width:200px;
		height:5000px;
		overflow:hidden;
		
		background-color:#3ca2f9;
		
		border-left:#000000 solid 2px;
		border-right:#000000 solid 2px;
		}

CSS; hier wäre das ganze Stylesheet.

Ich habe mir gedacht, ich gebe dem div eine sehr grosse Höhe und lasse es irgendwie mit overflow abschneiden, doch dies klappt nicht.

Hat mir jemand einen Tipp?

Merci wapplegraph

 

[janka]

div#balken_v{
height: 100%;
}

 

[tehshin]

div#balken_v{
height: 100%;
}

damit das funktioniert muss aber auch folgendes gegeben sein:

html, body {
height: 100%;
}

ich glaube aber das problem bei dieser methode ist, wenn jetzt der Inhalt eines anderen Element dazu führt das man scrollen muss, wird das Element mit dem Height:100% nicht über die Browser Höhe hinausgezeichnet.

Eine andere methode wäre natürlich das ganze über JavaScript zu machen.

 

[wapplegraph]

damit das funktioniert muss aber auch folgendes gegeben sein:

html, body {
height: 100%;
}

Ist ist der Balken aber so viel zu hoch, wie er einen Abstand vom oberen Browserrand hat.

 

[janka]

ich glaube aber das problem bei dieser methode ist, wenn jetzt der Inhalt eines anderen Element dazu führt das man scrollen muss, wird das Element mit dem Height:100% nicht über die Browser Höhe hinausgezeichnet.

Bin jetzt nicht sicher, ob ich dich richtig verstanden habe, aber wenn du dem anderen Element ebenfalls eine Höhe von 100% gibst, gibts kein Problem.

 

[wapplegraph]

Hallo

Also wenn ich dies von tehshin anwende, so ist, wenn kein anderes div zum Scrollen führt, der Balken um den Abstand vom oberen Browserrand zu gross.
Muss man aber scrollen, so bleibt die Höhe gleich der Browserhöhe.

Das div sollte aber immer zum unteren Rand vom body gehen!

wapplegraph

 

[wapplegraph]

Hallo

Weiss niemand eine Lösung, wie ich den Balken immer bis an den unteren Browserrand erweitern kann?

 

[iMacuser91]

position: fixed;
top: ??px;
left: ??px;
bottom: 0px;
width: 200px;

das könnte funktionieren, proboers mal aus. Nur das bleibt dann immer so.
Ansonsten kannst du ja mal
position: fixed;
top: 0px;
bottom: 0px;
width: 200px;
dafür vergeben und ein anderes Element auch mit der Breit 200 und Höhe den jetzigen Abstand von oben darein basteln, dann sollte es gehen (wenn du verstehst was ich meine).
Quasi machst du was, das immer so die komplette Länge des Fensters hat, aber dann von anderem überlagert wird, am besten noch z-index: 0 oder -1 oder so.

 

[Nathea]

Weil die Problematik "bis zum unteren Rand" sehr schwierig ist, mal ganz dumm gefragt:

Wäre es nicht das Einfachste, für die gewünschte Optik den background als pic mit dem blauen Feld (und den schwarzen Rändern) zu versehen? So ein Bild kann ja 1 Pixel hoch sein (Bildwiederholung dann "nach unten") und wäre dann entsprechend klein.

 

[MasterofDistres]

Mal so ganz am Rande, du hast 2x einen HEAD Teil eingebaut

Außerdem steht dein balken_v außerhalb vom 1. </HTML>… Also

</body>
</html>

zwischen </table> und </div> löschen, dann hat das Teil auch erstmal die gewünschte Höhe von 5000px.

Aber vielleicht mit Hilfe von http://kuler.adobe.com/ die Farbwahl noch überarbeiten, da lässt sich manches (z.B. die Links der Navigation) sehr schlecht lesen

Und am Besten für die ID-Bezeichnungen englische Begriffe nehmen, damit auch nicht deutsche Personen den Quelltext besser verstehen können

 

[iMacuser91]

Noch eine zweite Idee wäre, eine Art 'Inhaltsbox' zu verwenden mit min-height: 100%; und der gewünschten Breite in die dann alles rein kommt, darin kannst du dann dem Inhalt auch nur 500px Höhe oder so geben, aber dem Streifen 100%.
Das min-height bewirkt dann für den Balken, dass von Anfang an 100% hoch ist und beim Scrollen größer wird und (wahrscheinlich) immer 100% bleibt. Damit du dann an de Seiten (oben, unten, links, rechts) keine weißen Ränder hast könntest du noch body{margin: 0px;} machen.
Falls der Effekt aber links/rechts gewollt ist, dann kannst du ja der Inhaltsbox margin-right: 5px; margin-left: 5px oder so geben.

 

[wapplegraph]

Hallo

Also das mit dem Hintergrundbild habe ich mir auch überlegt. Habe aber gedacht vielleicht gibt es eine andere Lösung.

Das mit dem </html> verbessere ich. Die Farben sind noch gar nicht richtig. Bitte nicht motzen.

Ich probiere nun einmal den Vorschlag von iMacuser91. Muss ihn aber zuerst noch genau studieren.

Merci wapplegraph

 

[wapplegraph]

Hallo

Also ich habe nun alles in ein div#all getan mit der min-height:100% und dem div#balken_v gab ich die Höhe 100%. Nun ist er einfach so hoch wie es Inhalt hat.

Den Tipp mit body{margin: 0px;} konnte ich gebrauchen.

Merci wapplegraph

 

[iMacuser91]

Also ist alles richtig oder geht es immer noch nicht?
Kannst mir ja mal die Dateien schicken (auch Bilder, damit ich das testen kann) nur ohne Inhalt, nur das leere Design quasi, dann guck ich mir das mal an.

 

[wapplegraph]

Weil die Problematik "bis zum unteren Rand" sehr schwierig ist, mal ganz dumm gefragt:

Wäre es nicht das Einfachste, für die gewünschte Optik den background als pic mit dem blauen Feld (und den schwarzen Rändern) zu versehen? So ein Bild kann ja 1 Pixel hoch sein (Bildwiederholung dann "nach unten") und wäre dann entsprechend klein.

Hallo

Wenn ich es so machen würde, so muss ich ja unten immer noch einen Streifen anhängen, welcher min 30px hoch ist oder einfach bis zum unteren Rand des Browserfenster geht. Ist dies einfacher um zu setzen?

wapplegraph

 

[Nathea]

...
Wenn ich es so machen würde, so muss ich ja unten immer noch einen Streifen anhängen, welcher min 30px hoch ist oder einfach bis zum unteren Rand des Browserfenster geht. ...

hmmm ... das verstehe ich nicht so ganz.

Dieser 30px breite untere Streifen soll für Deinen Footer bestimmt sein? Oder hast Du damit was anderes vor?

Gruß,
Nathea

 

[wapplegraph]

Ja er soll nur mein footer sein, mit einer minimalen Höhe von 30px. Oder sonst bis ans untere Ende des Browserfensters.

 

[Nathea]

Der Footer bekommt einen farbigen Hintergrund und liegt ohnehin "über" dem background-Bild. Der wird Dich also nicht behindern

 

[wapplegraph]

Hallo

Jetzt versteh ich es nicht ganz oder du. Mein Ziel: einen Balken bis ans Ende des Browserfensters.
Er hat jedoch immer eine andere Höhe im Vergleich zum Inhalt.
Hier brauch er eine andere Höhe als hier.

Dies möchte ich möglichst einfach umsetzen können.

wapplegraph

 

[iMacuser91]

Hier brauch er eine andere Höhe als hier.

Das Menü hat einfach eine andere Höhe als der Inhalt - das ist Fakt und auch variabel (Einstellung des Besuchers).
Um das zu umgehen könntest du ein Hintergrundbild machen, welches beides aneinander darstellt und das als Hintergrund für #all oder so nehmen. (wenn du einfach ein Hintergrundbild für je Menü und Inhalt nehmen würdest, dann ändert das NICHTS, das bleibt einfach so)
1px hoch und so breit wie beides zusammen, dann einfach dem Text und dem Menü keinen (!) Hintergrund geben aber eine Breite (die jetzige) - dem Menü noch float:right; und unten unter alle einen Footer mit clear:both; (zur Sicherheit - kann auch ein <br> sein) und fertig.
Margin-bottom sollte bei #all und dem Menü/Inhalt immer 0 sein, dann geht beides immer bis zum Boden.
Nun hast du einen viereckigen Kasten, der immer bis zum Boden geht und brauchst noch unten die abgerundete Ecke:
Bild erstellen wie vorher, nur die Ecke nehmen und nur das äußere Stück nehmen, das was also vom Rest „abgeschnitten“ wurde um die Ecke rund zu machen. Das schneidest du dann als kleines Viereck aus (damit das Bild klein ist, also quasi nur soweit, dass NUR die Ecke dargestellt wird) und platzierst es dort mit position: relative; (usw) oder margin: 0px; padding: 0px; ganz unten links.
Fertig.