web-dev-qa-db-fra.com

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

J'essaie de créer un site Web comportant beaucoup de boîtes de même largeur et hauteur. Par exemple, j'ai une page qui a 2 boîtes de taille égale côte à côte.

La solution simple consistait à régler la largeur et la hauteur sur 50 vw. Cela fonctionne très bien jusqu'à ce qu'il y ait une barre de défilement. J'ai cherché sur Google pendant des heures et je ne comprends pas pourquoi vw et vh incluraient les barres de défilement dans la fenêtre d'affichage.

Voici un échantillon de mon numéro

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

Notez la barre de défilement horizontale indésirable

https://jsfiddle.net/3z887swo/

Une solution possible consisterait à utiliser des pourcentages pour les largeurs, mais vw pour la hauteur, mais ce ne sera jamais une boîte parfaite qui n’est pas la pire chose au monde, mais qui n’est pas idéale. Voici un échantillon

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

Quelqu'un sait-il pourquoi vw/vh inclut des barres de défilement dans la fenêtre d'affichage? En outre, si quelqu'un a une meilleure solution que la mienne, j'aimerais l'entendre. Je cherche une solution CSS pure. Je préfère ne pas avoir de javascript.

htmlcsscss3scrollbarviewport
15
Kevin

Ce serait pratique si les unités de la fenêtre n’incluaient pas de barres de défilement, mais que c’était la taille de l’affichage (écran). Regardez cette solution avec un pseudo élément si:

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

Fait aussi un carré dans votre exemple:

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

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

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

Edit - si quelqu'un se demande pourquoi cela fonctionne (un remplissage vertical répondant à la largeur de l'élément d'origine) ... c'est en gros ce qui est défini dans la spécification:

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

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

7
Shikkediel

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

PARCE QUE LES STANDARD-MAKERS SONT STUPIDES

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

Une solution simple consiste à garder la barre de défilement toujours à portée de main et à la gérer.

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

(utilisez overflow-x pour une mise en page utilisant vh)

Je crois qu'ils ont sérieusement vissé le chien sur celui-ci.

24
ZJR
html { overflow-x: hidden; }

semble fonctionner

0
Yleaxeman