DIV carré dont la hauteur est égale à la fenêtre d'affichage

Question

Je dois créer un DIV où width=height y height=100% de la fenêtre (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 d'affichage . Les éléments de ce DIV prendront leurs dimensions en pourcentage de la hauteur et de la largeur du DIV parent.

Il me semble que cela devrait être simple à faire. en CSS mais je m'y suis accroché ! Tout conseil serait très apprécié.

Answer 1

Je suis tombé sur un truc astucieux utilisant du css pur :

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

J'espère que cela vous aidera.

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

Answer 2

CSS seule solution : vh unités

Pour que l'élément soit redimensionné en fonction de la hauteur de la fenêtre d'affichage vous pouvez utiliser les unités vh :

vh : 1/100e de la hauteur de la fenêtre d'affichage. [ source MDN ]

---

Ejemplo:

body{margin:0;}

div{
    background:gold;
    height:100vh;
    width:100vh;
}

<div></div>

Fiddle DEMO

Ainsi, la largeur et la hauteur de l'élément seront égales à la hauteur de la fenêtre d'affichage.

---

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

Answer 3

Vous pouvez le faire avec jquery (ou du pur javascript 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);
});

Answer 4

CSS3 permet 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 d'affichage, et 100vh à la hauteur totale. Plus d'informations sur les valeurs et unités relatives de CSS3 aquí .

À l'heure où nous écrivons ces lignes, la seule prise en charge concerne Internet Explorer 9. Ce n'est donc probablement pas ce que vous recherchez, mais c'est une bonne chose à garder à l'esprit lorsque la prise en charge future suivra.

Answer 5

Une autre astuce que j'ai trouvée pour aider à résoudre partiellement ce problème, pour tous ceux qui tomberont 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é css "em" est égale au centième de la hauteur de votre page. Vous pouvez maintenant l'utiliser arbitrairement dans votre fichier css pour dimensionner n'importe quel élément par rapport à la hauteur de votre fenêtre d'affichage. Il s'agit d'une solution plus générique que les autres solutions énumérées ici, et il est fort probable que vous souhaitiez dimensionner les éléments suivants tous des éléments de votre page pour tenir compte de la hauteur de votre fenêtre d'affichage. Par exemple, si vous voulez maintenant créer votre carré, vous pouvez simplement écrire :

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

Bien entendu, vous devrez également en tenir compte pour tout le texte de votre page (puisque cette astuce affecte la taille de la police).