nicht angemeldet
Probleme mit height 100% und firefox
Hallo zusammen,
ich habe folgendes CSS File geschrieben.
/* Grundbox in der alles Angezeigt wird */
.grundbox {
width:auto !important;
height:auto !important;
width:100%;
height:100%;
min-width:400px;
min-height:auto;
position:relative;
background-color:#9FE6F6;
z-index:1;
border:10px solid #8EBF97;
padding:0px;
margin:0px;
}
/* Hintergrund gestalten (Body - Element)*/
body {
background:#8EBF97;
color:#000000;
padding:5px;
margin:0px;
}
html,body {
height:100%;
}
Wenn ich nun die Grundbox in einer HTML Seite aufrufe wird es im IE 7 so dargestellt wie ich es haben will. Eine Box die das ganze Fenster ausfüllt mit Rahmen darum.
Wenn ich das ganze im Firefox anschaue, dass ist die Box nur so hoch wie der Text der drin steht. Wenn ich nun in der grundbox min-height:100% mache, dann wird das innere der Box so hoch die sie Seite nur hab ich dann noch 10 Pixel Rahmen die dazukommen. Also die Seite ist zu hoch.
Ich bin schier am verzweifeln. Kann mir jemand weiterhelfen?
Gruß
Markus
PS: Es muss auch nicht unbedingt eine Box mir Rahmen außenherum sein. Ich will halt eine Box zentriert in der Seitenmitte um darin meine restliche Seite aufzubauen und diese Box soll sich je nach Auflösung anpassen und am besten unterhalb einer bestimmten Größe dann mit Scrollbalken versehen werden.
-
Lieber Freehawk,
Wenn ich nun die Grundbox in einer HTML Seite aufrufe wird es im IE 7 so dargestellt wie ich es haben will.
dann hast Du Glück, denn der IE macht (auch in der Version 7) viele Dinge nicht so, wie er sollte.
Wenn ich das ganze im Firefox anschaue, dass ist die Box nur so hoch wie der Text der drin steht.
Dann ist das richtig so. Der Firefox macht das richtig, der IE nicht. Warum ist das im Firefox "richtig"? Dazu solltest Du Dir im Firefox den Firebug-Plugin installiert haben, um das ganz genau sehen zu können.
Die Höhe des Body mag vielleicht nicht bis zum unteren Fensterrand reichen, wenn die Inhalte das nicht erfordern, daher kann 100% Höhe des Bodys deutlich weniger bedeuten, als Du vielleicht meinst. Umgekehrt kann bei längeren Seiten (bei denen man dann scrollen muss) 100% plötzlich so viel bedeuten, dass bei 50% bereits der Anfang unterhalb des sichtbaren Bereichs beginnt, wenn die Seite geladen hat.
Du wirst wohl entweder mit Pixelwerten für Dein <div> arbeiten müssen, oder mittels Javascript die verfügbare Fensterhöhe ausmessen und das <div> entsprechend anpassen müssen.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Zur Veranschaulichung folgendes Testbeispiel:
<html> <head> <title>Höhentest</title> <style type="text/css"> body { border: 1px solid red; background: yellow; } </style> </head> <body> <h1>Höhentest</h1> <p>Der Body ist nur sehr kurz, denn die Seite ist selbst sehr kurz!</p> </body> </html>Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo,
danke für die schnelle Antwort.
Wie müsste denn so ein Javascript aussehen um die Seitenhöhe zu vermessen und wie binde ich das in mein HTML/PHP Code ein?
Gruß
Markus-
Lieber Markus,
Wie müsste denn so ein Javascript aussehen um die Seitenhöhe zu vermessen
function ermittleFenstermasse() { var dx = dy = 0; // Voreinstellung // für IE: auf CSS1Compat-Modus prüfen var body = (document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement : document.body || null; if (window.innerHeight) { // Fenstermaße dx = window.innerWidth; dy = window.innerHeight; } else if (body) { // Ersatzweise Ausmaße des <body> ermitteln dx = body.offsetWidth; dy = body.offsetHeight; } return { breite : dx, hoehe : dy}; } // So nach dem vollständigen Laden der Seite(!) benutzen: alert( "Breite: " + ermittleFenstermasse().breite + "px\nHöhe: " + ermittleFenstermasse().hoehe + "px\n" );Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-
-