web-dev-qa-db-fra.com

Square DIV où la hauteur est égale à la fenêtre

J'ai besoin de créer un DIV où width=height et height=100% de la fenêtre d'affichage (qui, évidemment, est variable). 

En d'autres termes, un DIV parfaitement carré qui calcule ses dimensions en fonction de la hauteur de la fenêtre . Les éléments de cette DIV prendront leurs dimensions sous forme de pourcentages de la hauteur et de la largeur de la DIV-parent.

Il me semble que cela devrait être simple à faire en CSS , mais je suis resté coincé avec! Tous les indicateurs seraient très appréciés.

htmlcssaspect-ratiocss-shapes
43
Ila

Vous pouvez le faire avec jquery (ou javascript pur si vous préférez).

Avec jquery:

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

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

Il y a une astuce en utilisant pure css que je suis tombé sur:

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

J'espère que cela pourra aider.

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

117
Tomasz Kowalczyk

Solution CSS uniquement: vh unités

Pour redimensionner l’élément en fonction de la hauteur de la fenêtre, vous pouvez utiliser les unités vh:

vh: 1/100ème de la hauteur de la fenêtre. [ source MDN ]

Exemple:

body{margin:0;}

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

Fiddle DEMO

Cela rendra la largeur et la hauteur de l'élément égales à la hauteur de la fenêtre.

Le support Bowser pour les unités vh est IE9 +. Plus d'infos ici

31
web-tiki

Une astuce supplémentaire que j'ai proposée pour aider à résoudre partiellement ce problème, pour tous ceux qui trébuchent sur cette page ... Exécutez le code suivant dans l'événement onload de votre page:

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

Cela signifie que l'unité "em" css est égale à 100e de la hauteur de votre page. Vous pouvez maintenant l'utiliser de manière arbitraire dans votre fichier CSS pour redimensionner tout élément par rapport à la hauteur de votre fenêtre. C’est plus générique que les autres solutions énumérées ici. Et probablement, vous souhaitez redimensionner tous des éléments de votre page pour prendre en compte la hauteur de votre fenêtre. Par exemple, si vous voulez maintenant créer votre carré, vous pouvez simplement écrire:

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

Bien sûr, vous devrez également en tenir compte pour tout texte de votre page (car cette astuce affecte la taille de la police)

3
drcode

CSS3 a un moyen de le faire en utilisant vw, viewport width et vh, viewport height. En utilisant ces mesures, 100vw correspond à la largeur totale de la fenêtre et 100vh à la hauteur totale. Plus d'informations sur les valeurs relatives css3 et les unités ici .

Au moment de la rédaction de cet article, le seul support concerne toutefois Internet Explorer 9; il ne s'agit donc probablement pas de ce que vous recherchez, mais de quelque chose de bien à garder à l'esprit lors du support ultérieur.

3
Vap0r

C'est intéressant...

Pour ceux qui recherchent une méthode CSS pure pour contenir un squarediv avec les dimensions maximales:

La chose importante à retenir ici est que vous définissez max-width et max-height en définissant width et height aux valeurs opposées.

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;
}

Exemple d'exécution en cours:https://jsfiddle.net/resistdesign/szrv5o19/

0
Resist Design

Je ne sais pas si je comprends bien, mais si vous voulez le régler à 100% oh la hauteur de la fenêtre, vous pouvez facilement le faire en CSS

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

Vous pouvez le vérifier ici

0
desto

Vous pouvez utiliser Javascript et obtenir la taille de l'écran. Après quoi, vous pouvez définir la largeur et la hauteur en conséquence.

window.screen.width et window.screen.height devrait fonctionner. 

Vous pouvez ensuite utiliser ces informations et générer un petit peu de CSS pour que la page soit affichée en conséquence. 

0
Daniel Szekely