Bonjour,

J'ai un site constitué de 3 éléments : 

petit schéma :

les éléments {1,2} font un vh de 88 et l'élément {3} fais un vh de 12. Totalisant un total de 100 et prenant ainsi toute la page.

Si je veux que ces éléments fassent 100 de vh et pas plus, c'est car ne je veux pas que le site soit scrollable. Uniquement les éléments 1 et 2 indépendamment. 

Cependant lorsque je met la propriété 

overflow: scroll;

aux éléments 1,2 ils disparaissent (ou plutot ils prennent une largeur de 0 en vérifiant avec une inspection)

Voici le code :

<div class="container">
    <div class="main">
        <div class="top">
        </div>
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>
</div>

et le css:

.main {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
    .top {
        order: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        align-items: center;
        flex-basis: 100vw;
        height: 12vh;
    }
    .left, .right {
        overflow-y: scroll;
        flex-wrap: wrap;
        flex-basis: 0;
        flex-grow: 1;
        display: flex;
        height: 88vh;
        align-content: flex-start ;
    }
    .left {
        order: 2;
    }
    .right {
        justify-content: center;
        order: 3;
    }
}

Je dois surement mal utiliser cette propriété. En tout cas merci beaucoup pour votre aide !

matt

-
Edité par MattéoGoudin 19 octobre 2020 à 13:17:10

Salutations,

Quelque chose m'échappe, tu souhaites ne pas avoir de scroll, mais tu ajoutes derrière overflow: scroll; dont le but est justement d'ajouter un scroll, est-ce que j'aurais mal compris.

Normalement tu ne dois pas avoir de scroll si tu fais 12vh+88vh sauf si tu ne mets pas de reset CSS, dans ce cas il y aura les marges du body j'imagine ce qui doit fausser le calcul. 

Il me semble qu'une bonne pratique en HTML/CSS en 2020 est de commencer en mettant un reset CSS qui peut éviter ce genre de problèmes, mais je m'écarte ce n'est peut-être pas le débat

Pour ce que tu veux faire, ce qui me semble le choix le plus judicieux est de te tourner vers le display grid. 
Je t'ai fait un petit codepen, si tu as des questions hésites pas 

https://codepen.io/barbgegrasse/pen/wvWWmMB

-
Edité par Kovsky 19 octobre 2020 à 13:57:21

En fait non, c'est même tout à fait l'inverse.

Cela fait des années que tous les reset CSS sont à fuir : https://www.emmanuelbeziat.com/blog/les-resets-css-a-la-poubelle/ 

Kovsky a écrit:

Il me semble qu'une bonne pratique en HTML/CSS en 2020 est de commencer en mettant un reset CSS qui peut éviter ce genre de problèmes, mais je m'écarte ce n'est peut-être pas le débat

Je ne rentrerai pas dans le débat des reset CSS ici n'étant pas le sujet de la discussion. Si vous souhaitez ouvrir un topic pour en discuter ce sera avec plaisir 

Pour illustrer mon propos un autre codePen qui illustre le problème de l'auteur du topic qui se demande pourquoi avec 10vh + 90vh, il se retrouve avec un scroll 

https://codepen.io/pen/

PS : vous avez des erreurs sur votre site web --> https://www.emmanuelbeziat.com/portfolio/actforair/ title is not defined 

Le souci vient très probablement d'une marge non retirée quelque part. Il faudrait l'intégralité du code pour pouvoir le dire.

Par contre, l'intérêt d'utiliser flex et les hauteurs en vh est ici plutôt limitatif. Et si la hauteur du header venait à changer (modification du contenu, largeur de fenêtre réduite, modification du zoom par l'utilisateur, utilisation de CSS custom pour l'accessibilité) ?

Grid conviendrait bien mieux : https://codepen.io/EmmanuelBeziat/pen/mdEEKXj 

Kovsky a écrit:

PS : vous avez des erreurs sur votre site web --> https://www.emmanuelbeziat.com/portfolio/actforair/ title is not defined 

Ah, merci. C'est corrigé.

-
Edité par EmmanuelBeziat 19 octobre 2020 à 15:41:51

c'est à se demander si vous me lisez : 

- 1 j'avais posté un codepen en solutionnant le problème avec le display grid --> https://codepen.io/barbgegrasse/pen/wvWWmMB

- 2 suite à votre réponse je précise que le pb de vh 90+10vh ne marche pas à cause de la marge par défaut sur la balise body

Dans votre codepen vous retirez cette marge avec margin: auto; 

Si vous permettez je trouve le choix de auto un peu douteux qui laisse le soin au navigateur de calculer une marge, ne serait-il pas plus judicieux et explicite de mettre à 0 ?

Car c'est bien là le problème nous avons une marge alors nous n'en souhaitons pas.

Nous souhaitons avoir une marge à 0 pour que 100vh = 90vh +10vh et ne pas avoir de scroll 

En espérant être lu jusqu'ici.

Je vous souhaite une agréable fin de journée.

Euuh, je crois que tu me confonds avec Mewen_bzh ?

Sinon, auto n'est pas une marge, c'est la hauteur du bloc.

Le problème est JUSTEMENT de vouloir que 100vh = 90+10vh (ou 88+12, dans l'exemple initial). Fixer une hauteur n'est pas une bonne idée, surtout avec des valeurs relatives.

Dans cet exemple, le header variera non pas en fonction de son contenu, mais en fonction de la taille du viewport. Si je redimensionne ma fenêtre, le header est modifié, quitte à tronquer son contenu. Si je change le contenu, la hauteur du bloc ne s'adaptera pas.

Avec auto + fr, le problème ne se présente pas, et le layout sera toujours adapté, peu importe le contenu et le viewport.

-
Edité par EmmanuelBeziat 19 octobre 2020 à 16:08:42

Auto n'est pas une marge, c'est la hauteur du bloc.

donc quand je lis votre code, je dois voir que vous gérez la hauteur de votre body ?

body {

  margin: auto;

}

je ne m'étendrais pas plus ici, je pense que l'auteur a suffisamment d'informations pour solutionner son problème 

PS : oui je vous ai bien confondu vu qu'il citait votre site en source 

-
Edité par Kovsky 19 octobre 2020 à 16:17:50

Ah, au temps pour moi, je croyais qu'on parlait du auto sur la grid en lieu et place des hauteurs en vh.

Non, ça effectivement c'est une erreur d'inattention de ma part. Même si auto produira le même résultat tant qu'on n'indique pas à body une largeur définie, c'est bien 0 qu'il faut mettre en général.

merci beaucoup ! je ne m'attendais pas a d'autant d'aide !

suite à vos conseils, je vais positionner mes 3 éléments en display grid.

Cependant il y a un quiproquo (et c'est ma faute j'ai mal expliqué) le problème n'est pas que ma fenêtre est scrollable, elle ne l'est d'ailleurs pas (avec 100vh en tout, et il n'y a pas de margin en plus)

Je ne veux pas que la fenêtre soit scrollable mais uniquement et indépendamment les éléments 1 et 2. et lorsque je leur met un overflow: scroll à ces éléments, ils prennent une width de 0. 

J'appuie ça par un exemple sur le site d'ups par exemple: 

On voit bien que c'est un élément (ici la liste des points relais) qui est indépendamment scrollable de la page !

merci bcp et bonne soirée 

J'ai mis le codepen à jour, pas de problème pour ajouter le scroll, je préfère mettre le scroll uniquement sur la partie verticale avec overflow-y qui a la valeur auto, plutot que scroll, ainsi si le contenu est réduit le scroll disparait 

https://codepen.io/barbgegrasse/pen/wvWWmMB

c'est bon ! ça marche !

merci beaucoup pour votre aide. ton codepen m'a été super utile !