web-dev-qa-db-de.com

Wie mache ich ein Div den ganzen Bildschirm abdecken?

Ich habe eine Frage. 

Ich habe das bis jetzt bekommen:  enter image description here

Grundsätzlich möchte ich, dass das hervorgehobene div den Bildschirm Ihres Geräts abdeckt, unabhängig davon, wie groß der Bildschirm des Geräts ist. jetzt sehe ich 2 verschiedene divs, wenn ich das auf meinem handy öffne. Ich möchte nur die hervorgehobene sehen. Wie kann ich das erreichen? 

Vielen Dank im Voraus, Kevin

htmlcssresponsive
7
Kevin

Sie können Viewport-Höhe als Höhenwert verwenden: 

.main {
    height: 100vh;
    background-color: green;
}
<div class="main">
  CONTENT
</div>

Mit height: 100vh bedeutet das betreffende Element immer 100% Höhe des Viewports eines Benutzers/Devies.

Weitere Informationen: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

12
David Wilkinson

Sie können dies wahrscheinlich tun, indem Sie die Position des divs, das Sie im Vollbildmodus erstellen möchten, auf absolute setzen und anschließend das unten stehende CSS anwenden.

top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;

Das endgültige CSS wäre also wie folgt

.fullscreen{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    height:100%;
    width:100%;
}
3
saugandh k

Sie können position: absolute; oder position: fixed verwenden.
Verwenden Sie absolute, um nur die gesamte Seite abzudecken.
Verwenden Sie fixed, um es an einer Standardposition festzunageln. Wenn Sie fixed verwenden, können Sie zwar nicht zu mehr als 100% auf Ihrer Seite blättern, um andere Elemente anzuzeigen.

CSS

div.any {
   position: absolute; /*position: fixed;*/
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /*You can add anything else to this like image, background-color, etc.*/
}

HTML

<div class="any"></div>
2
Advaith
.video-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: fill;
}

.video-container video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
0
Abhishek Meharia