Wie erstellt man eine div 100% der Seite (nicht Bildschirm) Höhe?

Ich versuche CSS zu verwenden, um einen 'ausgegrauten' Effekt auf meiner Seite zu erzeugen, während eine Ladebox im Vordergrund angezeigt wird, während die Anwendung arbeitet. Ich habe dies getan, indem ich ein transparentes schwarzes div-Element mit 100% Höhe/Breite erstellt habe, dessen Sichtbarkeit über Javascript ein- und ausgeschaltet werden kann. Ich dachte, das wäre einfach genug; Wenn der Seiteninhalt jedoch bis zu dem Punkt erweitert wird, an dem der Bildschirm gescrollt wird, wird beim Scrollen zum Fuß der Seite ein Bereich angezeigt, der nicht ausgegraut ist. Mit anderen Worten, die 100% in der Höhe des div scheint sich auf die Größe des Browser-Darstellungsbereichs und nicht auf die tatsächliche Seitengröße auszuwirken. Wie kann ich das div so erweitern, dass es den gesamten Inhalt der Seite abdeckt? Ich habe versucht, JQuery .css ('height', '100%') zu verwenden, bevor ich die Sichtbarkeit ändere, aber das ändert nichts. Wie erstellt man eine div 100% der Seite (nicht Bildschirm) Höhe?

Dies ist die CSS der div in Frage:

div.screenMask 
{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
    background-color: #000000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    visibility: hidden; 
}

Dank.

Quelle

2009-06-16 Lee D

Würde es funktionieren scrollen Leiste zu deaktivieren, während Sie durchscheinend grau div angezeigt wird? Wollen Sie wirklich, dass Benutzer nach unten scrollen können, um etwas zu sehen, mit dem sie sowieso nichts anfangen können? – Adam

Wenn Sie position: absolute zu position: fixed ändern, funktioniert es in allen Browsern außer IE6. Dadurch wird das div-Element im Ansichtsfenster fixiert, sodass es beim Scrollen nicht aus der Ansicht verschoben wird.

Sie können $(document).height() in jQuery verwenden, damit es auch in IE6 funktioniert. Z.B.

Das würde es natürlich für alle anderen Browser auch beheben, aber ich bevorzuge kein JavaScript, wenn ich es vermeiden kann. Das gleiche müsste man auch für die Breite tun, falls es horizontal scrollen sollte.

Es gibt plenty of hacks around to make fixed positioning work in IE6 auch, aber sie neigen dazu, entweder andere Einschränkungen auf Ihrem CSS, oder verwenden Sie JavaScript, so dass sie wahrscheinlich nicht die Mühe wert sind.

Auch ich nehme an, Sie haben nur eine dieser Masken, also würde ich vorschlagen, eine ID für sie anstelle einer Klasse zu verwenden.

Quelle

2009-06-16 20:02:59 mercator

Wenn die Maske mit Javascript angezeigt wird, was ist mehr Javascript, um das Höhenproblem zu beheben? –

Danke, absolutes Ändern in fixed war alles was benötigt wurde! Ein guter Punkt über die ID auch. –

@Lee: Ausgezeichnet ... @ Paolo: Es ist kaum ein Problem hier, ich muss zustimmen. Aber während JS-Unterstützung hier nicht das Problem ist, mischen Sie Stil mit Verhalten und Sie können die Leistung (leicht) beeinflussen. Und Lee hat deine Frage auch beantwortet. Die JavaScript-Lösung war in diesem Fall eigentlich nicht notwendig. – mercator

Wenn Sie jQuery verwenden die Höhe einzustellen, bevor das Popup Ich vermute, es OK ist, etwas mehr javascript :)

Sie können einstellen, um die Höhe des div auf die Scrollheight von document.body hinzuzufügen - auf diese Weise sollte es den ganzen Körper abdecken. Sie müssen einige zusätzliche Tricks hinzufügen, um sicherzustellen, dass es den Körper bedeckt, für den Fall, dass sich etwas darunter entwickelt.

Quelle

2009-06-16 20:05:47 ylebre

div.screenMask 
{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    z-index: 1000; 
    background-color: #000000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    visibility: hidden; 
}

Durch alle top Einstellung bottom, left und right, sind die Höhe und Breite automatisch berechnet. Wenn screenMask ein direkt untergeordnetes Element des Elements <body> ist und das Standard-Box-Modell aktiviert ist (d. H. Der Mapping-Modus wurde nicht ausgelöst), wird dies die gesamte Seite abdecken.

Quelle

2009-06-16 20:26:26

Müssen Sie 'position: fixed' nicht verwenden, um zu verhindern, dass die div.screenMask scrollt, wenn die darunterliegende Seite größer als eine Ansichtsfensterhöhe ist? –

Das funktioniert in IE6 überhaupt nicht. In anderen Browsern braucht es Position: relativ zum Körper zu arbeiten, und selbst dann funktioniert es nur beim vertikalen Scrollen, nicht beim horizontalen Scrollen. – mercator

Mir ist klar, dass ich so lange antworte, lange nachdem ich gefragt wurde, aber ich bin hier gelandet, nachdem ich von diesem Problem kurz ins Stolpern geraten bin und keine der aktuellen Antworten korrekt ist.

Hier ist die richtige Antwort:

body { 
    position: relative; 
}

Das ist es! Jetzt wird Ihr Element relativ zu <body> anstatt des Ansichtsfensters positioniert.

Ich würde nicht mit position: fixed stören, da seine Browser-Unterstützung fleckig bleibt.Safari vor iOS 5 hat es überhaupt nicht unterstützt.

Beachten Sie, dass Ihr <div> Element <body> 's Rand-Box (Box + Padding + Rahmen) abdecken wird, aber es wird nicht seinen Rand abdecken. Kompensieren Sie, indem Sie negative Positionen auf Ihrem <div> setzen (z. B. top: -20px), oder indem Sie den Rand von <body> entfernen.

Ich würde auch empfehlen <body> zu height: 100% zu stellen, um sicherzustellen, dass Sie nie mit einem teilweise maskierten Ansichtsfenster auf einer kürzeren Seite enden.

Zwei gültige Punkte aus früheren Antworten genommen. Wie Ben Blank sagt, können Sie die width und height Deklarationen verlieren, stattdessen alle vier Ecken positionieren. Und mercator hat recht, dass Sie für ein so wichtiges Einzelelement eine ID anstelle einer Klasse verwenden sollten.

Dies folgendes empfohlen vollständige CSS Blätter:

body { 
    position: relative; 
    margin: 0; 
} 

#screenMask { 
    position: absolute; 
    left: 0; right: 0; 
    top: 0; bottom: 0; 
    z-index: 1000; 
    background-color: #000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    visibility: hidden; 
}

Und HTML:

<body> 
    <div id="screenMask"></div> 
</body>

Ich hoffe, das jemand anderes hilft!

Quelle

2012-08-16 03:32:34

+1, aber ich werde darauf hinweisen, dass selbst dies ein fragwürdiger Ansatz ist, wenn die Position des Scroll-Containers relativ ändern kann unvorhergesehene Konsequenzen haben. Zum Glück ist mein Scroll-Container heute schon relativ positioniert! Der Trick, 'position: absolute' mit' left', 'right',' top' und 'bottom' zu kombinieren, ist manchmal ein echter Lebensretter und immer leicht zu vergessen. –

Die Positionierung relativ zu "body" löst es fast, aber die Körpergröße auf 100% zu setzen ist keine sinnvolle Lösung: Während Seiten, die das Ansichtsfenster nicht füllen, korrigiert werden, werden größere aufgelöst, dh body hat nur die Höhe des Viewports . Auch das Einstellen von "min-height: 100%" auf body scheint gar nichts zu tun (Firefox). –

Wenn Sie Popup mit Overlay-Effekt wollen, dann können Sie diesen Schritt verwenden ..

<style> 
.overlay{ 
background:#000; 
opacity:0.5; 
position:fixed; 
z-index:1; 
width:100%; 
height:100%; 
} 
.popup{ 
width:500px; 
margin:auto; 
position:fixed; 
z-index:2; 
height:300px; 
} 
</style> 
<div class="overlay"></div> 
<div class="popup"> 
     Hello everyone 
</div>

Quelle

2014-09-18 12:43:27

Wie erstellt man eine div 100% der Seite (nicht Bildschirm) Höhe?

Antwort

Verwandte Themen