Warum scheint ein Element mit "Höhe: 100%"> 100% zu sein?

Ich habe eine Seite, wo während die Seite lädt, legte ich eine absolute DIV über alle meine Inhalte mit "height:100%", dass "die Seite wird geladen ...".Warum scheint ein Element mit "Höhe: 100%"> 100% zu sein?

Es scheint jedoch von der Bildlaufleiste, dass die Höhe der Seite 100% + die Höhe des Inhalts ist.

Sobald die Seite geladen wird und die absolut positionierte DIV-Überlagerung auf display:none eingestellt ist, verschwindet diese sofort.

Dies geschieht in Firefox 3, Chrome, IE6.

Irgendwelche Ideen, wie man Höhe macht: 100%, nur 100% und nicht mehr?

<html> 
    <head> 
    <style type="text/css"> 
     * html, * body {height: 100%; margin: 0; padding: 0} 
      #message {background: black; height: 100%; left: 0; opacity: 0.15; position: absolute; top: 0%; width: 100%} 
      #loading {height: 100%; left: 0; position: absolute; top: 45%; width: 100%; z-index: 2} 
      #loading p {background: white; border: 2px solid #666; width: 180px} 
    </style> 
    </head> 
    <body> 
    <div id="grayout"></div> 
    <div id="loading"><p>Page is loading...</p></div> 
    <div id="content"> 
    // content is dynamically loaded into this div via AJAX 
    </div> 
    </body> 
</html>

aktualisieren: es das Problem auftritt, ist, dass ich "top: 45%". Wie verschiebe ich das DIV in die Mitte der Seite (da es sich um eine "Seite lädt Nachricht" handelt), ohne das gleiche Problem noch einmal zu verursachen?

Quelle

2009-05-08 Anonymous

Beachten Sie, dass '* body' alle Browser und nicht nur den IE auslöst. – Gumbo

Können Sie den HTML-Code und jedes andere CSS hinzufügen, das Sie verwenden. – tspauld

Ich habe versucht, das HTML in der Frage und keine seltsamen Probleme mit Bildlaufleisten oder Inhalt Höhe zu sehen. –

Wenn dieses Element einen vertikalen Abstand oder Rand hat, wird es entsprechend der CSS-Spezifikation zur Höhe des Blocks hinzugefügt (siehe visual formatting model for absolutely positioned, non-replaced elements).

bearbeiten Die top:45% ist Ihr Element 45% nach unten bewegen. Entfernen Sie es (top:0) oder setzen Sie die Höhe des Elements auf auto (Standardwert).

Quelle

2009-05-08 16:08:03 Gumbo

Nein, funktioniert nicht –

Nun, wir brauchen etwas Code oder die Seite selbst, um zu sehen, was dieses Verhalten verursacht. – Gumbo

Code ist über –

Versuche Zugabe

overflow: hidden;

Quelle

2009-05-08 16:08:24 janhartmann

Das funktioniert nicht, weil mein Inhalt länger als eine Seite ist. Überlauf: versteckt - das lässt die Bildlaufleiste verschwinden. –

Absolut positionierte Elemente werden aus dem Fluss von der Seite genommen, so dass die div wahrscheinlich nicht hinter dem Inhalt angebracht wird. Warum ist der Container div überhaupt absolut positioniert?

Quelle

2009-05-08 16:09:18

Haben Sie versucht:

* html, * body {height: 100%; margin: 0; padding: 0;}

die auch alle Polsterung und Margen von der Seite entfernen sollten.

Quelle

2009-05-08 16:09:24 workmad3

Ich habe Padding/Rand auf 0 gesetzt - immer noch das gleiche Problem –

Dies ist die richtige Antwort. Die Höhe: 100% auf HTML und Körper bewirkt, dass diese 100% füllen, was bedeutet, dass das div, das der Körper enthält, 100% gehen kann. Mit nur dem Rand/Padding wird es nicht funktionieren. – jlarson

-1

Ha geschrieben HTML ein Problem ohne Introtext verursacht ..

<html> 
    <head> 
    </head> 
    <body> 
    <div style="height: 100%; background-color: blue;"></div> 
    </body> 
</html>

Quelle

2009-05-08 16:10:48

Fast immer, ich meine CSS mit der folgenden Zeile beginnen:

* {padding:0; margin:0}

Ihr Problem beheben soll.

Quelle

2009-05-08 16:13:53

Ich habe das Padding/Rand auf 0 gesetzt und das löst das Problem nicht –

Re: // eine Menge von Inhalten über AJAX dynamisch geladen

Ist eine der dynamischen Daten sind unzerbrechlich Linien oder vielleicht Bilder oder Text, der den Raum überschreiten würde?

Quelle

2009-05-08 16:36:44 MichaelICE

"Bilder, die den Raum überschreiten würde" - überschreiten, was Raum? Der "Inhalt" DIV wächst und schrumpft basierend auf der Menge des Inhalts. Ähnlich wie diese Webseite wächst um die mehr Antworten, die gepostet werden. Ich bin verwirrt –

Ihr "loading" div ist die volle Höhe des Fensters, und es ist 45% von oben positioniert, so dass es das Fenster um 45% überläuft und Ihnen eine Bildlaufleiste bietet.

Versuchen Sie, es an den Anfang der Seite zu verschieben und den Text vertikal zu zentrieren.

Quelle

2009-05-08 16:41:33 tspauld

Warum scheint ein Element mit "Höhe: 100%"> 100% zu sein?

Antwort

Verwandte Themen