web-dev-qa-db-fra.com

Solution de contournement des unités de visualisation CSS Calc?

D'après ce que j'ai vu dans autreréponses , les unités de fenêtres CSS ne peuvent pas encore être utilisées dans les instructions calc(). Ce que je voudrais réaliser est la déclaration suivante:

height: calc(100vh - 75vw)

Existe-t-il un moyen de contourner ce problème en utilisant uniquement CSS même si les unités de la fenêtre d'affichage ne peuvent pas être utilisées dans l'instruction calc()? Ou simplement CSS et HTML? Je sais que je peux le faire de manière dynamique en utilisant javascript, mais je préférerais CSS.

htmlcsscss3viewport-unitscss-calc
47
golmschenk

Avant de répondre à cette question, je voudrais signaler que Chrome et IE 10+ prennent en charge le calcul avec des unités de fenêtres.

FIDDLE (Dans IE10 +)

Solution (pour les autres navigateurs): dimensionnement de la boîte

1) Commencez par définir votre taille à 100vh.

2) Avec le réglage de la taille de la boîte à la bordure, ajoutez un rembourrage de 75vw. Cela signifie que le rembourrage fera partie de la hauteur intérieure. 

3) Il suffit de compenser le haut de rembourrage supplémentaire avec un haut de marge négative 

VIOLON

div
{
    /*height: calc(100vh - 75vw);*/
    height: 100vh;
    margin-top: -75vw;
    padding-top: 75vw;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: pink;
}
59
Danield

Pour contourner le problème, vous pouvez utiliser le fait que le pourcentage de remplissage vertical et la marge sont calculés à partir de la largeur du conteneur. C'est une solution assez laide et je ne sais pas si vous pourrez l'utiliser, mais bon, cela fonctionne: http://jsfiddle.net/bFWT9/

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div>It works!</div>
    </body>
</html>

html, body, div {
    height: 100%;
}
body {
    margin: 0;
}
div {
    box-sizing: border-box;
    margin-top: -75%;
    padding-top: 75%;
    background: #d35400;
    color: #fff;
}
6
MatTheCat
<div>It's working fine.....</div>

div
{
     height: calc(100vh - 8vw);
    background: #000;
    overflow:visible;
    color: red;
}

Vérifiez ici que ce code CSS prend en charge maintenant tous les navigateurs sans Opera

il suffit de vérifier ceci

Vivre 

voir l'aperçu en direct de jsfiddle

Voir aperçu en direct de codepen.io

4
MD Ashik

Faire cela avec une grille CSS est assez facile. L'astuce consiste à définir la hauteur de la grille sur 100vw, puis d'affecter l'une des lignes à 75vw et celle qui reste (facultatif) à 1fr. D'après ce que je suppose, cela vous donne un conteneur de redimensionnement à ratio verrouillé.

Exemple ici: https://codesandbox.io/s/21r4z95p7j

Vous pouvez même utiliser l'espace de gouttière inférieur si vous le souhaitez, simplement en ajoutant un autre "élément".

Edit: Le programme d'exécution de code intégré à StackOverflow a certains effets secondaires. Passez sur le lien codesandbox et vous verrez le ratio en action.

body {
  margin: 0;
  padding: 0;
  background-color: #334;
  color: #eee;
}

.main {
  min-height: 100vh;
  min-width: 100vw;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 75vw 1fr;
}

.item {
  background-color: #558;
  padding: 2px;
  margin: 1px;
}

.item.dead {
  background-color: transparent;
}
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="src/index.css" />
  </head>

  <body>
    <div id="app">
      <div class="main">
        <div class="item">Item 1</div>
        <!-- <div class="item dead">Item 2 (dead area)</div> -->
      </div>
    </div>
  </body>
</html>

0
Artif3x