webentwicklung-frage-antwort-db.com.de

Quadrat DIV, dessen Höhe dem Viewport entspricht

Ich muss ein DIV erstellen, in dem width=height und height=100% des Viewports (der offensichtlich variabel ist). 

Mit anderen Worten, eine perfekt quadratische DIV, die ihre Abmessungen basierend auf der Höhe des Viewports berechnet. Elemente in diesem DIV nehmen ihre Abmessungen als Prozentsatz der Höhe und Breite des übergeordneten DIVs an.

Es scheint mir so, als sollte es einfach sein, in CSS zu machen, aber ich bin dabei festgefahren! Alle Hinweise wären sehr dankbar.

43
Ila

Sie können dies mit jquery (oder reinem Javascript, wenn Sie möchten) tun.

Mit jquery:

<div id="square">
</div>

$(document).ready(function(){
  var height = $(window).height();
  $('#square').css('height', height);
  $('#square').css('width', height);
});
17
Ant

Es gibt einen ordentlichen Trick mit reinem CSS, auf den ich gestoßen bin:

#square {
width: 100%;
height: 0;
padding-bottom: 100%;
}

Hoffentlich hilft das.

http://blog.brianjohnsondesign.com/2013/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/

117

Nur-CSS-Lösung: vh units

Um die Größe des Elements entsprechend der Höhe von viewport anzupassen, können Sie vh-Einheiten verwenden:

vh: 1/100 der Höhe des Ansichtsfensters. [ Quell-MDN ]


Beispiel:

body{margin:0;}

div{
    background:gold;
    height:100vh;
    width:100vh;
}
<div></div>

Fiddle DEMO

Dadurch werden Breite und Höhe des Elements an die Höhe des Ansichtsfensters angepasst.


Bowser-Unterstützung für vh-Units ist IE9 +. Mehr Infos hier

31
web-tiki

Ein weiterer Trick, mit dem ich dieses Problem teilweise lösen konnte, für alle, die über diese Seite stolpern ... Führen Sie den folgenden Code im Onload-Ereignis Ihrer Seite aus:

$('body').css('font-size',$(window).height()/100)

Dies bedeutet, dass die css "em" -Einheit 100. der Seitenhöhe entspricht. Sie können diese Option jetzt beliebig in Ihrer CSS-Datei verwenden, um die Größe eines Elements relativ zu Ihrer Ansichtsfenstermaßgröße zu ändern. Dies ist allgemeiner als die anderen hier aufgelisteten Lösungen. Wahrscheinlich möchten Sie all der Elemente Ihrer Seite unter Berücksichtigung Ihrer Viewport-Höhe anpassen. Wenn Sie beispielsweise Ihr Quadrat erstellen möchten, können Sie einfach Folgendes schreiben:

#square{width:100em;height:100em}

Natürlich müssen Sie dies auch für jeden Text auf Ihrer Seite berücksichtigen (da dieser Trick die Schriftgröße beeinflusst).

3
drcode

CSS3 bietet hierfür eine Möglichkeit, vw, Breite des Ansichtsfensters und Höhe des Ansichtsfensters. Mit diesen Maßen ist 100 Vw die gesamte Breite des Ansichtsfensters und 100 Vh die gesamte Höhe. Weitere Informationen zu relativen css3-Werten und Einheiten hier .

Zum Zeitpunkt des Schreibens dieses Dokuments ist der einzige Support jedoch Internet Explorer 9, daher ist dies wahrscheinlich nicht das, wonach Sie suchen, es ist jedoch etwas Gutes, das Sie berücksichtigen sollten, wenn zukünftiger Support folgt.

3
Vap0r

Das ist interessant...

Für diejenigen, die eine reine CSS-Methode suchen, um eine squarediv mit den maximalen Dimensionen zu enthalten:

Der Schlüssel dazu ist, dass Sie max-width und max-height setzen, während Sie width und height auf die entgegengesetzten Werte setzen.

HTML

<div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

div {
  background-color: red;
  width: 100vh;
  height: 100vw;
  max-width: 100vw;
  max-height: 100vh;
}

Live-Beispiel:https://jsfiddle.net/resistdesign/szrv5o19/

0
Resist Design

Ich weiß nicht, ob ich das richtig mache, aber wenn Sie es auf 100% der Höhe des Viewports setzen möchten, können Sie dies leicht in css tun:

.stuff {
  background:#DDD;
  display:inline-block;
  height: 100vh;
  width : 100vh;
}

Sie könnten es ausprobieren hier

0
desto

Sie könnten Javascript verwenden und die Bildschirmgröße ermitteln. Danach können Sie Breite und Höhe entsprechend einstellen.

window.screen.width und window.screen.height sollten funktionieren. 

Sie können diese Informationen dann verwenden und ein kleines bisschen CSS generieren, damit die Seite entsprechend angezeigt wird. 

0
Daniel Szekely