web-dev-qa-db-fra.com

Un div avec redimensionnement automatique lors du changement de largeur de fenêtre\hauteur

J'ai regardé partout. et ne parvenais toujours pas à trouver un exemple de code d’une idée très "basique":

Une div qui prend 90% de la taille de l’écran et s’ajuste automatiquement chaque fois que la taille du navigateur change (pour prendre 90% de la taille de l’écran)

Les divs imbriqués à l’intérieur devraient aussi se redimensionner eux-mêmes.

est-ce même possible?

MODIFIER:

largeur 90% ne fonctionne pas lorsque j'essaie de redimensionner l'écran verticalement.

htmlautoresize
20
Urbanleg

Utilisez les attributs vh. Cela signifie la hauteur de la fenêtre et est un pourcentage. Donc hauteur: 90vh signifierait 90% de la hauteur de la fenêtre. Cela fonctionne dans la plupart des navigateurs modernes.

Par exemple. 

div {
  height: 90vh;
}

Vous pouvez renoncer au reste de vos stupides trucs à 100% sur le corps.

Si vous avez un en-tête, vous pouvez aussi faire des choses amusantes, comme en tenir compte en utilisant la fonction calc en CSS.

Par exemple. 

div {
  height: calc(100vh - 50px);
}

Cela vous donnera 100% de la hauteur de la fenêtre, moins 50 px pour votre en-tête.

40
Eric Warnke

Dans ce scénario, le <div> extérieur a une largeur et une hauteur de 90%. Le div> intérieur a une largeur de 100% de son parent. Les deux se mettent à l'échelle lorsque vous redimensionnez la fenêtre.

HTML

<div>
    <div>Hello there</div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

body > div {
    width: 90%;
    height: 100%;
    background: green;
}

body > div > div {
    width: 100%;
    background: red;
}

Démo

Essayez avant d'acheter

9
insertusernamehere
  <!DOCTYPE html>
    <html>
  <head>
  <style> 
   div {

   padding: 20px; 

   resize: both;
  overflow: auto;
   }
    img{
   height: 100%;
    width: 100%;
 object-fit: contain;
 }
 </style>
  </head>
  <body>
 <h1>The resize Property</h1>

 <div>
 <p>Let the user resize both the height and the width of this 1234567891011 div 
   element. 
  </p>
 <p>To resize: Click and drag the bottom right corner of this div element.</p>
  <img src="images/scenery.jpg" alt="Italian ">
  </div>

   <p><b>Note:</b> Internet Explorer does not support the resize property.</p>

 </body>
 </html>
0
Racharla Sruthi