1. Lieber Benutzer,

    Du musst bei uns registriert sein, um an den Diskussionen teilzunehmen. Melde dich jetzt an - kostenfrei und unverbindlich. Und stelle Deine eigenen Fragen oder gib uns hilfreiche Antworten

Box über volle Höhe

Dieses Thema im Forum "CSS" wurde erstellt von thuemmy, 16 Juli 2008.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. thuemmy

    thuemmy Aktives Mitglied

    Registriert seit:
    10 Juni 2008
    Beiträge:
    1.934
    Punkte für Erfolge:
    38
    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
     
    Werbung: Jetzt registrieren, damit diese Werbung verschwindet
  2. threadi

    threadi Moderator

    Registriert seit:
    20 Oktober 2006
    Beiträge:
    14.220
    Punkte für Erfolge:
    63
    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.
     
  3. thuemmy

    thuemmy Aktives Mitglied

    Registriert seit:
    10 Juni 2008
    Beiträge:
    1.934
    Punkte für Erfolge:
    38
    Also, die Box ist jetzt immerhin größer geworden. Aber leider so schätzungsweise 120% :-| Das ist also nicht die Lösung.

    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
     
  4. thuemmy

    thuemmy Aktives Mitglied

    Registriert seit:
    10 Juni 2008
    Beiträge:
    1.934
    Punkte für Erfolge:
    38
    Ups, das war ein Fehler... ich hatte die Semikolons vergessen :(

    Mit Semikolon hat sich da auch nichts verändert.

    Gruß thuemmy
     
  5. threadi

    threadi Moderator

    Registriert seit:
    20 Oktober 2006
    Beiträge:
    14.220
    Punkte für Erfolge:
    63
    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).

    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? ;)

    Internet Explorer 5 - Wikipedia, the free encyclopedia
    Windows Internet Explorer – Wikipedia
     
  6. thuemmy

    thuemmy Aktives Mitglied

    Registriert seit:
    10 Juni 2008
    Beiträge:
    1.934
    Punkte für Erfolge:
    38
    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 (text):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head>
    4. <title>Titel</title>
    5. <meta name="description" content="Beschreibung">
    6. <meta name="author" content="Matthias">
    7. <meta name="keywords" content="Schlüsselwörter">
    8. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    9. <link rel="stylesheet" type="text/css" href="./style/style.css">
    10. </head>
    11. <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    12. <div class="main" >
    13. <img src="http://www.html.de/images/logo.jpg" width="720" height="117" border="0" alt="Molitor-Bedachungen">
    14. <div id="navsite">
    15. <h5>Navigation</h5>
    16. <ul>
    17.   <li><a href="index.html">Startseite</a></li>
    18.   <li><a href="ueber_uns.html">Über uns</a></li>
    19.   <li><a href="leistungen.html">Leistungen</a></li>
    20.   <li><a href="bilder.html">Bilder</a></li>
    21.   <li><a href="aktuell.html">Aktuelles</a></li>
    22.   <li><a href="partner.html">Partner</a></li>
    23.   <li><a href="kontakt.html">Kontakt</a></li>
    24.   <li><a href="impressum.html">Impressum</a></li>
    25. </ul>
    26. </div>
    27. <div class="content"><h1>Willkommen auf unserer Website</h1>
    28. <p><img src="http://www.html.de/images/auf_der_messe.JPG" width="300" height="235" border="0" alt="Molitor-Bedachungen auf der Messe"></p>
    29. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    30. labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
    31. ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    32. </div>
    33. </div>
    34. </body>
    35. </html>
    Code (text):
    1. html {
    2. height:100%;
    3. }
    4.  
    5. body {
    6.  background-image: url(../images/bg2.jpg);
    7.  background-repeat: repeat;
    8.  background-color: white;
    9.  font-family: Verdana, Arial, sans-serif;
    10.  height:100%:
    11. }
    12.  
    13. .main {
    14.  width:720px;
    15.  height:100%;
    16.  margin-left:auto;margin-right:auto;
    17.  margin-top:15px;
    18.  margin-bottom:15px;
    19.  border-width:1px;
    20.  border-style: solid;
    21.  border-color: black;
    22.  background-color: white;
    23. }
    24.  
    25. #navsite h5 {
    26.  display:none;
    27. }
    28. #navsite ul {
    29.  padding: 3px 0;
    30.  margin-left: 0;
    31.  border-bottom: 1px solid #778;
    32.  font: bold 12px Verdana, sans-serif;
    33. }
    34. #navsite ul li {
    35.  list-style: none;
    36.  margin: 0;
    37.  display: inline;
    38. }
    39. #navsite ul li a {
    40.  padding: 3px 0.5em;
    41.  margin-left: 3px;
    42.  border: 1px solid #778;
    43.  border-bottom: none;
    44.  background: #DDE;
    45.  text-decoration: none;
    46. }
    47. #navsite ul li a:link {
    48.  color: #448;
    49. }
    50. #navsite ul li a:visited {
    51.  color: #667;
    52. }
    53. #navsite ul li a:link:hover, #navsite ul li a:visited:hover {
    54.  color: #000;
    55.  background: #AAE;
    56.  border-color: #227;
    57. }
    58. #navsite ul li a#current {
    59.  background: white;
    60.  border-bottom: 1px solid white;
    61. }
    62.  
    63. .content {
    64.  width:700px;
    65.  height:100%;
    66.  margin-left:0px;
    67.  margin-right:0px;
    68.  margin-top:0px;
    69.  margin-bottom:0px;
    70.  background-color: white;
    71.  padding:10px;
    72. }
    HTML- und CSS-Code sind valide.

    Und nun freue ich mich auf Eure Tipps.

    Gruß thuemmy
     
  7. prm

    prm Aktives Mitglied

    Registriert seit:
    30 Juni 2008
    Beiträge:
    2.062
    Punkte für Erfolge:
    38
    Kleine Ursache, große Wirkung:
    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
     
  8. thuemmy

    thuemmy Aktives Mitglied

    Registriert seit:
    10 Juni 2008
    Beiträge:
    1.934
    Punkte für Erfolge:
    38
    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
     
  9. prm

    prm Aktives Mitglied

    Registriert seit:
    30 Juni 2008
    Beiträge:
    2.062
    Punkte für Erfolge:
    38
    Das mit dem Doppelpunkt sind Flüchtigkeitsfehler, die passieren jedem, anfangs mehr, später weniger, oder man such gezielt danach, wenn etwas nicht stimmt.

    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.

    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.
     
  10. thuemmy

    thuemmy Aktives Mitglied

    Registriert seit:
    10 Juni 2008
    Beiträge:
    1.934
    Punkte für Erfolge:
    38
    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 :D

    Gruß thuemmy

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

    Efchen Guest

    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
     
  12. prm

    prm Aktives Mitglied

    Registriert seit:
    30 Juni 2008
    Beiträge:
    2.062
    Punkte für Erfolge:
    38
    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 <body> das einfügen:

    Code (text):
    1.  
    2. <!--[if lt IE 6]>
    3. <center>
    4. <div style="text-align: left;"
    5. <![endif]-->
    6.  
    und am Ende vor </body> das:
    Code (text):
    1.  
    2. <!--[if lt IE 6]>
    3. </div>
    4. </center>
    5. <![endif]-->
    6.  
    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.
     
  13. thuemmy

    thuemmy Aktives Mitglied

    Registriert seit:
    10 Juni 2008
    Beiträge:
    1.934
    Punkte für Erfolge:
    38
    An alle die geholfen haben, erstmal vielen Dank.

    Nö, ich hab den nicht mehr :-D 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.
     
  14. neuroleptika

    neuroleptika Aktives Mitglied

    Registriert seit:
    12 Januar 2008
    Beiträge:
    2.517
    Punkte für Erfolge:
    38
    IE5 (Windows) bis IE6 wenden text-align auch auf Blockelemente an:
    Code (text):
    1.  
    2.   body {
    3. text-align: center;
    4. }
    5. .main {
    6. text-align: left;
    7. width: 720px;
    8. }
    9.  
    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.
     
    Zuletzt bearbeitet: 17 Juli 2008
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen