28234 sujets

CSS et mise en forme, CSS3

Sur flex ajuster scrollbar height au contenu d'à cote

bonjour
voici mon css et html

.flex{display:flex}.content{width:86%;margin:1.5em 0}.nav{width:14%;min-width:75px;height:540px;margin:5em -2em -3em 2em;overflow-y:scroll}.nav a{display:block;text-align:left;line-height:2em}



<div class="flex">
<nav class="nav"></nav>
<div class="content"></div>
<div>


la hauteur de mes nav et content sont variables, sur certaines pages nav et plus haut que content, sur d'autres c'est l'inverse
nav etant un menu lateral, je voudrais que sa hauteur maximum soit celle de la div content qui est à cote et quand elle la depasse que ce soit le scroll qui prenne le relais.
pour l'instant je n'ai reussi qu'en lui fixant une hauteur approximative mais qui n'est franchement pas satisfaisante

comment faire?
merci
Modérateur
Hello,

Là, à brûle-pourpoint, j'envisagerai le JS (ne pas me casser la tête) pour ton souci. Il y a cependant une solution en CSS peut être. 


window.addEventListener('DOMContentLoaded', function(){
    var $contents = document.querySelectorAll('.flex > .content'),
        $navs = document.querySelectorAll('.flex > nav');
        
    for(var i = 0; i < $contents.length; i++){
        $contents[i].style.height = window.getComputedStyle($navs[i]).getPropertyValue('height');
    }
});

<<<EDIT
Comme tu utilises des class, j'ai utilisé querySelectorAll. Or, je pense que suivant ton énoncé ce ne soit pas une bonne idée (baisse perf) Smiley ohwell . J'ai l'impression qu'il y a qu'une nav et content dans ta page. Smiley rolleyes

Aussi, j'ai utilisé la structure de controle "for". Pour faire bien, forEach est plus adéquate. Mais cela implique qu'il faille implémenter un polyfill. De toute manière, le principe est que tu comprennes ce que je viens d'écrire (te donner une piste à suivre) . Si tu as des questions, pose les ! ici on apprend !
EDIT;

ps : ta class .nav ne sert strictement à rien. Si ce n'est que tu dois aimer taper au clavier et pour être sûr et certain que ce soit une navigation....

le code est fait de tête. Je peux m'être trompé.
Modifié par niuxe (07 Oct 2017 - 12:27)
merci niuxe
je regarde tout ca
oui j'aurai voulut trouve la solution en css
ma class nav sert... en fait ici je n'ai pas mis tt la structure de ma page, j'ai simplfie
j'ai aussi une navigation horizontale au dessus du flex
en ts cas merci de t'etre penche sur cette question
Modérateur
En CSS, il te faudrait te tourner vers position:absolute pour sortir le contenu de nav du flux et qu'il ne soit pas pris en compte. Un element supplementaire devient necessaire pour le coup: https://codepen.io/gc-nomade/pen/aLqgbo

<div class="flex">
  <nav class="nav">
    <div class="buffer">
      <a>link</a><a>link</a><a>link</a><a>link</a><a>link</a><a>link</a><a>link</a><a>link</a><a>link</a><a>link</a><a>link</a><a>link</a><a>link</a><a>link</a><a>link</a><a>link</a>
    </div>
  </nav>
  <div class="content">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
      lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
      facilisis luctus, metus</p>
  </div>
  <div>


.flex {
  display: flex;
  border:solid;
}
.content {
  width: 86%;
  margin: 1.5em 0;
}
.nav {
  width: 14%;
  min-width: 75px;
  position:relative;
  margin:0;/* marges a reporter sur .buffer */
}
.buffer {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  overflow:auto;
  margin:2em;
}
.nav a {
  display: block;
  text-align: left;
  line-height: 2em;
}
Modérateur
gcyrillus a écrit :
En CSS, il te faudrait te tourner vers position:absolute pour sortir le contenu de nav du flux et qu'il ne soit pas pris en compte.


J'avoue que j'ai pas bien saisie son souci. le flex devrait répondre à son souci. Smiley ohwell

@nantais : il faudrait que tu nous dises ou nous montrer via un schéma le rendu que tu veux obtenir
Modifié par niuxe (08 Oct 2017 - 03:09)
Modérateur
niuxe a écrit :


J'avoue que j'ai pas bien saisie son souci. le flex devrait répondre à son souci. Smiley ohwell

@nantais : il faudrait que tu nous dises ou nous montrer via un schéma le rendu que tu veux obtenir


Il semble a priori souhaiter que la navigation ne participe pas au calcul de hauteur, seul le contenu. Le probleme n'apparait que lorsqu'il y a peu de contenu Smiley smile . perso, C'est ce choix que je ne comprend pas. Je pense qu'avec un exemple fonctionnel, il y a des chances qu'il revoit cette approche.

cdt
Modérateur
gcyrillus a écrit :


Il semble a priori souhaiter que la navigation ne participe pas au calcul de hauteur, seul le contenu. Le probleme n'apparait que lorsqu'il y a peu de contenu Smiley smile . perso, C'est ce choix que je ne comprend pas. Je pense qu'avec un exemple fonctionnel, il y a des chances qu'il revoit cette approche.

cdt


+1
merci gcyrillus

je viens de tester ca semble fonctionner au poil
il fallait que j'inclue une div absolute sur l'autre en relative
je n'ai jamais appris, je bidouille et decouvre tous les jours je vais chrcher text-indent que je ne connais pas
merci gcyrillus

je viens de tester ca semble fonctionner au poil
il fallait que j'inclue une div absolute sur l'autre en relative
je n'ai jamais appris, je bidouille et decouvre tous les jours je vais chrcher text-indent que je ne connais pas
merci gcyrillus

je viens de tester ca semble fonctionner au poil
il fallait que j'inclue une div absolute sur l'autre en relative
je n'ai jamais appris, je bidouille et decouvre tous les jours je vais chrcher text-indent que je ne connais pas
bonjour
la solution de gcyrillus marche parfaitement
j'ai juste un probleme que je voudrais resoundre
une bar de scroll se met a droite de mon ecran (sur le body donc) quand la hauteur de page depasse celle de mon ecran
je voudrais desactiver ce scroll sur le body car il provoque un decalage pour le centrage quand il s'active ou pas
j'ai teste:
body { width: 900px;height: 100%; overflow: hidden;}

cela supprime bien la barre et le decalage, mais du coup je ne peux plus faire defiler ma page qd elle despasse l'ecran
comment feriez vous
merci
Sujet clos
Aller à