Anzeigebereich über gesamte Browserhöhe mit CSS

A

Arnold

New member
Servus!

Ich habe eine kleines Problem mit meiner neu zu erstellenden Internetseite, die ich mit XHTML und CSS erstellen möchte.
Zur Vorabinfo: Aussehen soll das ganze ungefähr so: Seilklettertechnik
Die Seite hatte ich mal erstellt, allerdings mit Tabellen.
Ich möchte einen festen Anzeigebereich mit 800px Breite definieren, der immer mittig im Browser angezeigt wird und ggf. horizontal zu scrollen ist, falls der Browser zu klein ist. Mit dem Einfügen von div.Tags hat das auch schon ganz gut geklappt.
Der Anzeigebereich soll eine vom Hintergrund unterschiedliche Farbe (z.B grau) erhalten und immer! von oben bis unten im Browser komplett angezeitgt werden. Das Problem: Bei fehlender Definition einer Höhe hört der Bereich unterhalb des hier geschriebenen Textes auf und geht nicht bis ganz unten. Bei Definition der Höhe zu 100% wird dann ein längerer zu scrollender Anzeigebereich bei mehr Text nicht mehr grau hinterlegt.
Habe schon einiges probiert, aber bisher keine gute Lösung gefunden.

Ich hoffe, ihr versteht das Problem und könnt mir weiterhelfen.
Gruß Arnold


- ERLEDIGT -
 
Zuletzt bearbeitet:
da sachen wie min-height im ie < 7 leider nicht gehen, wäre es vermutlich das beste es mit einer hintergrund grafik im body zu machen, wenn du einen footer hast/brauchst könntest du diesen mit einer links oder rechts gefloateten box ans ende des layouts setzen.

dann würde dieser im falle eines längeren Layouts automatisch nach unten verschoben wenn es erforderlich ist.

edit --> - ERLEDIGT - ups, gar nicht gesehen.....
 
Byteandi schrieb:
da sachen wie min-height im ie < 7 leider nicht gehen, wäre es vermutlich das beste es mit einer hintergrund grafik im body zu machen, wenn du einen footer hast/brauchst könntest du diesen mit einer links oder rechts gefloateten box ans ende des layouts setzen.
Zum Vergrößern anklicken....

Thaliada schrieb:
Stu Nicholls | CSSplay | Min-Height for Internet Explorer
Zum Vergrößern anklicken....

Soweit ich weis wurde im IE 7 dieser Bug behoben und dafür die CSS-Eigenschaft min-height eingepflegt. Wie müsste das also für eine Seite aussehen, welche im Gecko-, IE <= 6- und IE 7-Browser gleichfalls funktionieren bzw. aussehen soll?
 
Mit dieser änderung sollte es gehen, getestet unter WindowsXP SP2 mit
  • Mozilla Firefox 2
  • Internet Explorer 6
  • Internet Explorer 7
  • Netscape 7.1
Code: 
.BlaBla {
  ...
  ...
  min-height:250px;
  height:auto !important;
  height:250px;
  ...
  ...
}
 
Habe das gerade mal versucht, aber irgendwie funktioniert das nicht. Mein HTML:
HTML: 
<!doctype html public „-//w3c//dtd html 3.2 final//en">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1252">
	<title>Grundplatenwahl</title>
	<link href="../vicom2.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="all"></div>

</body>
</html>

und zur ID das CSS (Ausschnitsweise):
Code: 
body				{background-color:#ffffff; 
				font-family:Verdana,Arial; 
				font-size:10pt; 
				font-style:normal; 
				color:#000000; 
				text-align:justify; 
				vertical-align:top; 
				margin:0px; 
				padding:20px;}
#all			{
				position:relative;
				margin:auto 0px;
				width:100%; 
				min-height:100%;
				height:auto !important;	
				height:100%;
				border:1px solid #4A79B3; 
				text-align:left; 
				background-color:#D8E5F5;
				overflow:hidden;
				z-index:0;
				float:left;
				}
 
Was soll float:left und position:relative bewirken?
Das widerspricht sich.
Wird das Element aus den Anzeigefluß genommen und der nachfolgende Inhalt fließt Links davon? Oder wird es Relativ zum Elternelement positioniert (wobei dann Positionsangaben Sinn machen würde)?

Eine Höhe von 100% bezieht sich auf die Höhe des Elternelementes, d.h. gib dem Elternelement z.b. mal einen border, dann kannst du sehen woran sich die Höhe orientiert.

[EDIT]Ach und ein vernüftiger DOCTYPE wäre auch nicht verkehrt.
 
Das float und die position habe ich reingenommen, um ein nachfolgendes Problem zu lösen. Ist jetzt erst mal wieder raus.

Wo dieser kryptische DOCtype herkommt ist mir schleierhaft. Habe ihn jetzt durch Strict ersetzt.

Den body habe ich als Referenz auf 100% gesetzt. Aber das Ding will sich einfach nicht aufziehen.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
						"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1252">
	<title>Grundplattenwahl</title>
	<link href="../vicom3.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="all"></div>
</body>
</html>

Code: 
body				{
				background-color:#ffffff; 
				margin:0px; 
				padding:20px;
				height:100%;
				border:1px solid #4A79B3;
				}
#all			{
				margin:auto 0px;
				width:100%; 
				min-height:100%;
				height:auto !important;	
				height:100%;
				border:1px solid #4A79B3; 
				background-color:#D8E5F5;
				}
 
Danke, das habe ich mittlerweile auch mitbekommen und umgesetzt. Soweit funktioniert das ganze auch, aber wie bekomme ich jetzt einen Rand von 20px hin, ohne dass das Bild über den Browserand geht und Scrollbalken erscheinen?
 
Also ohne Doctype Transitional bekomme ich das nicht geregelt. Wenn jemand noch einen Tip hat, wie ich es dennoch hinbekomme, wäre ich echt froh.
 
Der DOCTYPE ist für die Darstellung nur wichtig weil er den Browser in den Quirks- oder Standardmode versetzt, ansonsten bestimmt er nur welche Tags und Attribute gültig sind. Wenn ich das richtig sehe benutzt du einen DOCTYPE der den Browser in den Quirksmodus versetzt, was eine ungünstige Wahl ist.

Wir wissen natürlich auch nicht, von welchem Bild du sprichst. Ich hab keine Ahnung was du konkret erreichen willst, dir sollte aber klar sein, dass HTML/CSS gewissen Einschränkungen unterliegt, die man manchmal mit Tricksereien vermeiden kann. Besser wäre es sich auf die Vorteile von HTML/CSS zu konzentrieren, die u.a. darin besteht, dass sich Elemente an die Gegebenheiten im Browserfenster anpassen können.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben