Pourquoi vw inclut-il la barre de défilement dans la fenêtre d'affichage?

Je suis en train de construire un site web qui a beaucoup de boîtes qui sont de même largeur et la hauteur. Par exemple, j'ai une page qui a 2 taille égale boîtes côte à côte.

La solution la plus simple était de définir la largeur et la hauteur de 50vw. Cela fonctionne très bien jusqu'à il y a une barre de défilement. J'ai Googlé autour pendant des heures et ne comprennent pas pourquoi sur la terre vw et vh devrait inclure les barres de défilement dans le cadre de la fenêtre d'affichage.

Voici un échantillon de mon problème

HTML

<div class="container">
    <div class="box red"></div>
    <div class="box green"></div>
</div>
<div class="lotta-content"></div>

CSS

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100vw;
}

.box {
    float: left;
    width: 50vw;
    height: 50vw;
}

.red {
    background-color: red;
}

.green {
    background-color: green;   
}

.lotta-content {
    height: 10000px;   
}

Avis indésirables barre de défilement horizontale

https://jsfiddle.net/3z887swo/

Une solution possible serait d'utiliser des pourcentages pour les largeurs, mais vw pour la hauteur, mais il ne sera jamais parfait boîte qui n'est pas la pire chose dans le monde, mais pas encore idéal. Voici un exemple de

https://jsfiddle.net/3z887swo/1/

Personne ne sait pourquoi vw/vh inclure les barres de défilement dans le cadre de la fenêtre d'affichage? Aussi, si quelqu'un a une meilleure solution que la mienne, je serais ravi de l'entendre. Je suis à la recherche d'un pur CSS solution. Je préfère ne pas avoir javascript.

source d'informationauteur Kevin

  1. 7

    Il serait pratique si la fenêtre d'affichage des unités n'ont pas inclure les barres de défilement, mais il est de la taille d'affichage (écran), après tout. Avoir regarder cette solution avec un pseudo-élément:

    http://www.mademyday.de/css-height-equals-width-with-pure-css.html

    Fait un carré dans votre exemple:

    https://jsfiddle.net/3z887swo/4/

    .box {
    float: left;
    width: 50%;
}

.box::before {
    content: "";
    display: block;
    padding-top: 100%;
}

    Modifier - si quelqu'un se demande pourquoi cela fonctionne (remplissage vertical de répondre à l'original de l'élément de largeur)... c'est fondamentalement la façon dont il est défini dans le cahier des charges:

    Le pourcentage est calculé par rapport à la largeur de la boîte du bloc contenant, même pour les 'padding-top' et 'padding-bottom'.

    http://www.w3.org/TR/CSS2/box.html#padding-properties

  2. 21

    J'ai une réponse différente, et ressentent le besoin de partager ma frustration

    PARCE QUE LA NORME DÉCIDEURS SONT STUPIDES

    (comités, en général, le sont toujours)

    Une solution simple est de garder la barre de défilement toujours autour et être traitées avec elle

    html,body {margin:0;padding:0}
html{overflow-y:scroll}

    (utiliser overflow-x pour une mise en page qui utilise vh)

    Je crois qu'ils sérieusement défoncer le toutou sur celui-ci.

  3. 0
    html { overflow-x: hidden; }

    semble fonctionner