Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich dafür sorgen, dass das Element „das gesamte Ansichtsfenster für Vollbildhintergründe ausfüllt“?

Wie kann ich dafür sorgen, dass das Element „das gesamte Ansichtsfenster für Vollbildhintergründe ausfüllt“?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-31 18:46:02652Durchsuche

How to Make the `` Element Fill the Entire Viewport for Full-Screen Backgrounds?

Verlängerung des Element im Vollbildmodus

F: Ich habe einen radialen Farbverlauf als Hintergrund auf meine Webseite angewendet:

<code class="css">background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));</code>

Der Farbverlauf wird jedoch verdeckt, wenn der Seiteninhalt nicht sichtbar ist. Es nimmt nicht den gesamten Bildschirm ein. Wie kann ich sicherstellen, dass Element erstreckt sich immer so, dass es das gesamte Ansichtsfenster ausfüllt?

A: Um dies zu erreichen, verwenden Sie die folgenden CSS-Regeln:

<code class="css">html, body {
    margin: 0;
    height: 100%;
}</code>

Dadurch wird sichergestellt, dass es keinen Rand um den gibt. Element und dass es sich über die gesamte Höhe der Seite erstreckt. Das Ergebnis ist ein konsistenter Hintergrund mit radialem Farbverlauf, der unabhängig von der Länge des Inhalts bestehen bleibt.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass das Element „das gesamte Ansichtsfenster für Vollbildhintergründe ausfüllt“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn