Box über volle Höhe

Hallo Forum,

ich bin gerade dabei, für einen Bekannten eine Website etwas zu redesignen. Nun möchte ich eine Box über die volle Browserhöhe haben, auch wenn nur wenig Inhalt in der Box ist. Ich hoffe ich habe mich halbwegs verständlich ausgedrückt.

Hier die Webseite: Testseite /Nicht wundern, im Moment gehen nur die ersten 2 Seiten.

Achja, der IE 5.5 scheint das Box-Modell nicht so richtig zu verstehen, da ist die Box (class=„main“) immer linksbündig. Wie kann ich das denn abstellen?

Gruß thuemmy

Du müsstest in html, body und #main die Höhe auf 100% setzen um auch die volle Fensterhöhe auszufüllen.

Der IE 5.5 ist extrem alt und wird sehr selten verwendet. Ich würde mir da keine weiteren Gedanken drüber machen.

Du müsstest in html, body und #main die Höhe auf 100% setzen um auch die volle Fensterhöhe auszufüllen.
Also, die Box ist jetzt immerhin größer geworden. Aber leider so schätzungsweise 120% :expressionless: Das ist also nicht die Lösung.

Der IE 5.5 ist extrem alt und wird sehr selten verwendet. Ich würde mir da keine weiteren Gedanken drüber machen.
Na, so alt isser nu auch nicht, der IE 5.5. Mir wäre es schon recht, dass das auch auf 5.5 läuft.

Gruß thuemmy

Ups, das war ein Fehler… ich hatte die Semikolons vergessen :frowning:

Mit Semikolon hat sich da auch nichts verändert.

Gruß thuemmy

Ist es schon. Würde sagen, du hast noch irgendwo einen Abstand nach oben oder unten (sowohl Innen- als auch Außenabstand wäre möglich).

Na, so alt isser nu auch nicht, der IE 5.5. Mir wäre es schon recht, dass das auch auf 5.5 läuft.

Der 5.5 ist aus dem Jahr 2000. Der Support (und somit auch alle Sicherheitsupdates) wurden seitens Microsoft bereits eingestellt. Willst Du deinen Besuchern durch eine korrekte Ansicht in diesem alten „Stück“ wirklich empfehlen mit einer riesen Sicherheitslücke herumzusurfen? Übrigens haben seit 2006 nur noch weit weniger als 1% der Internetsurfer einen solchen Browser. Meinst Du die kommen alle zu dir? :wink:

Internet Explorer 5 - Wikipedia, the free encyclopedia
Windows Internet Explorer – Wikipedia

So, nachdem ich nun ausgeschlafen bin, auf ein neues. Also, beim ersten Versuch der Änderung habe ich das Semikolon vergessen. Daraufhin war die Box länger als das angezeigte Browserfenster. Nachdem ich die Semikolons eingefügt habe, ist es wieder beim alten, die Box ist zu kurz und nicht browserfüllend.

Hier der Code der Übeltäter:

[code]

Titel
Molitor-Bedachungen

Willkommen auf unserer Website

Molitor-Bedachungen auf der Messe

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

[/code][code]html { height:100%; }

body {
background-image: url(…/images/bg2.jpg);
background-repeat: repeat;
background-color: white;
font-family: Verdana, Arial, sans-serif;
height:100%:
}

.main {
width:720px;
height:100%;
margin-left:auto;margin-right:auto;
margin-top:15px;
margin-bottom:15px;
border-width:1px;
border-style: solid;
border-color: black;
background-color: white;
}

#navsite h5 {
display:none;
}
#navsite ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navsite ul li {
list-style: none;
margin: 0;
display: inline;
}
#navsite ul li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navsite ul li a:link {
color: #448;
}
#navsite ul li a:visited {
color: #667;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background: #AAE;
border-color: #227;
}
#navsite ul li a#current {
background: white;
border-bottom: 1px solid white;
}

.content {
width:700px;
height:100%;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
background-color: white;
padding:10px;
}[/code]

HTML- und CSS-Code sind valide.

Und nun freue ich mich auf Eure Tipps.

Gruß thuemmy

Kleine Ursache, große Wirkung:

body {
background-image: url(…/images/bg2.jpg);
background-repeat: repeat;
background-color: white;
font-family: Verdana, Arial, sans-serif;
height:100%[SIZE=5]:[/SIZE]
}

Ersetze den Doppelpunkt durch ein Semikolon.
Allerdings wird deine Seite dann länger als 100%. Das hängt wie bereits erwähnt damit zusammen, dass du Innen- und Außenabstände verwendest, welche die Gesamthöhe beeinflussen. Das ist richtig und von den CSS-Definitionen her („CSS-Boxmodell“) auch normal so.
Wenn du unbedingt 100% Höhe haben willst, musst du etwas in die Trickkiste greifen. Du bekommst dann allerdings u.U. ein inneres Scrollfenster, was Geschmacksache ist. Vielleicht hilft dir für diese Konstruktion das weiter:
Layout mit 100 % Höhe bei fixiertem Header und Footer

Hallo prm,

erstmal danke für die Antwort. Mit dem Doppelpunkt/Semikolon ist mal wieder bewiesen, dass man ab einem gewissen Müdigkeitslevel nüscht mehr programmieren, auszeichnen, designen, oder wie auch immer, sollte. Ich habe mir mal den Link angeguckt, und die von Dir schon erwähnte Scrollleiste (bei der Demo-Seite) ist auch dort zu sehen.

Die Umstände, ob das Scrollfenster erscheint oder nicht, von was ist das abhängig. Ist das clientabhängig, oder kann ich sagen, wenn es bei mir auf den Browsern nicht da ist, dann ist es auf denselben Browsern bei anderen Leuten (egal welches OS, welche Auflösung) auch nicht zu sehen? Oder verhält sich das eher wie das Wetter: mal regnet es und dann auch wieder nicht? Dann hätte es für mich keinen Wert, und ich lebe lieber mit der unterschiedlich langen main-Box.

Gruß thuemmy

Das mit dem Doppelpunkt sind Flüchtigkeitsfehler, die passieren jedem, anfangs mehr, später weniger, oder man such gezielt danach, wenn etwas nicht stimmt.

Die Umstände, ob das Scrollfenster erscheint oder nicht, von was ist das abhängig.

Von der Bildschirmauflösung bzw. -höhe und vom Inhalt der Seite.
Längerer Inhalt erweitert die Höhe und dann passt halt irgendwann nix mehr rein, so dass man scrollen muss.
Ist somit in zweierlei Hinsicht unberechenbar:
a) ist der Inhalt i.d.R. flexibel und veränderbar
b) hast du auf die Bildschirmgrößen deiner Besucher keinerlei Einfluss.

Dann hätte es für mich keinen Wert, und ich lebe lieber mit der unterschiedlich langen main-Box

Bei konstantem Inhalt und fixer Breite ist die Box ja auch immer gleich hoch. Nur eben durch margin- und Padding bedingt nicht immer 100%. Ich sehe darin überhaupt kein Problem. Wenn du nicht zu viel Inhalt auf eine Seite packst, dann erübrigt sich das Scrollen ohnehin. Und ansonsten gibt’s die normale Browser-Scrollbar, das ist bei den meisten Seiten doch gang und gebe.

An deiner Stelle würde ich die 100% height-Werte bei den Div’s rausnehmen. Wenn ohnehin genügend Platz ist, dann passt es, ansonsten muss man eben etwas scrollen - was man bei 100% Höhe und größerem Inhalt ja auch ohnhin müsste.

Naja, da sich die Inhaltsmenge ja von Seite zu Seite ändert, ist auch die Größe der Box unterschiedlich. Aber damit kann ich besser leben, als das da mitten in der Seite eine Scrollbar ist. Ich hab die Höhenangaben überall raus gemacht. Fertig!

Ich glaub Efchen sagt das öfters. Man muss kompromisbereit sein :smiley:

Gruß thuemmy

P.S. Weißt Du zufällig einen CSS-Hack, damit die Box im IE 5.5 auch zentriert dargestellt wird?

Vom Bildschirm, der Bildschirmauflösung oder auch der Marke des Herstellers ist bei Webseiten gar nichts abhängig.
Es ist abhängig vom Viewport oder auch Browserinnenbereich. Nicht nur, dass Du in einem Browser für gewöhnlich durch Tool- oder Sidebars nicht so viel Platz hast, wie die Bildschirmauflösung hergibt, nein, man kann auch sein Fenster verkleinern. Selbst bei einer Auflösung von 1600x1200 könnte das Browserfenster nur 478x863px groß sein. Der verfügbare Platz wäre dann wahrscheinlich noch geringer. Außerdem kann nur JavaScript die Bildschirmauflösung ermitteln.

Also nochmal kurz, weil das oft falsch gemacht wird: Webseiten - Kein Bezug zur Auflösung.

Gruß,
-Efchen

Du könntest mal folgendes probieren, aber ohne Gewähr, da ich mich schon fast nicht mehr an den IE 5.5 erinnern kann:
Nach das einfügen:

<!--[if lt IE 6]>
<center>
<div style="text-align: left;"
<![endif]--> 

und am Ende vor das:

<!--[if lt IE 6]>
</div>
</center>
<![endif]--> 

Ist dir denn der IE 5.5 so wichtig und hast du den noch?
Ich denke den kann man mittlerweile guten Gewissens vernachlässigen, es sei denn, deine Seite wird vorwiegend in unterentwickelten Ländern angesehen, deren Updates nicht in dem Tempo erfolgen wie bei uns.

An alle die geholfen haben, erstmal vielen Dank.

Ist dir denn der IE 5.5 so wichtig und hast du den noch?
Nö, ich hab den nicht mehr :smiley: Ich glaube auch, bevor ich mir da Gedanken über so ein Urgestein mache, lass ich den lieber aussen vor, zumal die Seite ja trotzdem zu benutzen ist.

Gruß thuemmy

Kann dann von meiner Seite aus geclosed werden.

IE5 (Windows) bis IE6 wenden text-align auch auf Blockelemente an:

body { text-align: center; } .main { text-align: left; width: 720px; } Es ist keine Browserweiche nötig.
mit text-align: left für .main wird der linksbündige Textfluss wieder hergestellt.
Wie das in der 5.5-Mac-Version aussieht weiß ich nicht. Im Schlimmsten Fall bleibt es wohl einfach linksbündig.
Das fehlerhafte Boxmodell (IE5 und IE5.5) ist meist einfach zu umgehen.
Ohne Testumgebung würde ich das aber auch lassen.
Da die Boxen eher kleiner dargestellt werden bleiben die Seiten oft auch so nutzbar.
img-Bilder oder Tabellen sprengen das Layout wegen dem knapperen Innenabstand aber schon.

Mann kann das fehlerhafte Boxmodell auch testweise für den IE6 herbeiführen.
Mit einem beliebigen Zeichen vor dem Doktype rutscht der IE6 in den Quirks-Modus und zeigt die Boxen mit dem gleichen Fehler wie der IE5 an.
Für gelegentliche Tests reicht das vielleicht.