• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit height

D

DerMitSkill

Guest
Hallo,
hab ein div, welches 100% höhe hat. Solange der Viewport größer ist, als der Inhalt lang, ist alles ok. Ist der Viewport aber kleiner, sodass man scrollen muss, fließt der Text über das div. Scrollt man runter, hat das div dort keine Hintergrundfarbe mehr, weil es ja schon vorher zu Ende ist.

Also möchte ich folgendes:
Viewport größer als Inhalt im div -> 100%
Viewport kleiner als Inhalt im div (sodass man scrollen muss) -> so hoch wie der Inhalt

So, wie fix ich das?
 
Dies erreichst du mit min-height:100%;, was allerdings dooferweiße nicht in allen Browsern funktioniert.

Daher definierst du minheight mit !important und davor noch height ohne Important.
Dann noch overflow:scroll;, damit die Internet User dann n Scrollbalken am Div bekommen.


MfG
 
Dankeschön. Die Lösung mit overflow:scroll; ist nicht gut, denn dann wird immer ein Scrollbalken angezeigt, auch wenn nicht gescrollt werden muss. Muss dann gescrollt werden, bleibt der nicht nutzbare Scrollbalken stehen und der Browser setzt einen daneben.... gibt es keine bessere Lösung?

Link der Seite auf Wunsch per PN.
 
Dann setze das scroll als conditional comment
HTML: 
bla
{
		height: 100%;
		min-height:100% !important;
		<!--[if lt IE 6> overflow:scroll; <![endif]-->
}

threadi schrieb:
Das geht in jedem modernen Browser einschließlich IE7 und IE8. Im IE6 genügt es eine "height:" anzugeben, da er "height" wie "min-height" behandelt.
Zum Vergrößern anklicken....

Okay, aber für versionen unter IE6 löse ichs dann mit Conditional Comments.

MfG
 
Lassen wir den IE6 mal außer betracht, daher das overflow:scroll; weg.

Es geht trotzdem nicht. Link gerne per PN, ich verzweifel...

Vielleicht ist es wichtig, dass in dem div gefloatet wird?
 
Imbericle schrieb:
Dann setze das scroll als conditional comment
HTML: 
bla
{
        height: 100%;
        min-height:100% !important;
        <!--[if lt IE 6> overflow:scroll; <![endif]-->
}
Zum Vergrößern anklicken....

Falsch. Conditional Comments stehen im HTML, nicht im CSS-Code. Wenn man die Browserunterscheidung im CSS-Code vornehmen möchte kann man mit dem Star-HTML-Hack

Code: 
* html bla { overflow: scroll; }

eine Ausnahmeregel für den IE6 erstellen.

DerMitSkill schrieb:
Dankeschön. Die Lösung mit overflow:scroll; ist nicht gut, denn dann wird immer ein Scrollbalken angezeigt, auch wenn nicht gescrollt werden muss. Muss dann gescrollt werden, bleibt der nicht nutzbare Scrollbalken stehen und der Browser setzt einen daneben.... gibt es keine bessere Lösung?
Zum Vergrößern anklicken....

Das klingt nach einem komplexen HTML-Quellcode als Du beschrieben hast. Bitte zeig den Quellcode oder Link damit man das beurteilen kann. (nein, eine PN möchte ich deswegen nicht bekommen)
 
"Wer floatet muss auch clearen", neuroleptika hat das Problem gelöst. Nochmals vielen Dank!
 
Zuletzt bearbeitet von einem Moderator:
Ich konnte es mir online ansehen.
#seite enthält nur floats.
Es fehlte ein clear: both;

Edit:
ups,
steht da ja schon seit einer knappen Stunde.
 
Zuletzt bearbeitet:
Der Opera 10 streikt noch etwas. Öffne ich die Seite in einem kleinen Viewport (bzw. nicht maximiert oder so klein, dass man scrollen muss) und ziehe das Fenster dann größer, wächst das div nicht mit. In den anderen Browsern schon. Weshalb?

In Internet Explorer 7 und 8, Mozilla Firefox 3.5, Safari 4 sowie Google Chrome 3 gibt es keine Probleme. Mehr Browser möchte ich auch nicht beachten, bis auf Opera 10.
 
Ich habe es mir im 0pera 9.63, 9.64 und 9.25 angesehen.
Den Fehler kann ich nicht erkennen.

Es gibt diesen Bug im Opera.
Allerdings sollte das nur vorkommen wenn es keine externe css-Datei gibt.
Klingt irre, ist aber so.

Welche Version verwendest du?
 
Opera 10 habe ich nicht,
kann also nur raten:
Mit Obera kann mann sich komplette Internetseiten in einer Datei (mit Grafiken und css) abspeichern.

Hast du das vielleicht gemacht?

Edit:
Ich habe mich geirrt.
Opera berechnet die Mindesthöhe nur beim (neu)laden der Seite.
Wird das Fenster nach dem laden, vertikal scaliert wird die Höhe nicht neu berechnet.
Eine css-Lösug habe ich nicht.
Ein Operanutzer wird sich an diesem kleinen Schönheitsfehler nicht stören (falls er ihn überhaupt bemerkt) ;)

Im vorherigen Post habe ich das mit einem älteren Bug verwechselt (Opera 9.5).
 
Zuletzt bearbeitet:
Mit window.innerHeight bekommst du die nötige Höhe für #seite:
Code: 
 function neueHoehe()
  {
var hoehe=(window.innerHeight);
document.getElementById("seite").style.minHeight = hoehe + "px";
  }

Die Funktion mit onresize aufrufen:
Code: 
<body onresize="neueHoehe()">

Ich würde Opera aber diese Eigenart einfach zugestehen.
Ich mußte den Seiten-zoom extrem verkleinern um den Fehler überhaupt zu erkennen.
(bei 1280 x 1024 px)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben