Bonjour à tous !

J'ai cherché une solution à mon problème et si je me retrouve ici, c'est que je ne l'ai pas trouvée

J'utilise Bootstrap pour un petit projet de site et ma page contient (en gros) trois colonne.

Celle de gauche un menu, celle du milieu le contenu de la page comme des articles et autre, la colonne de droite : un autre menu.

Je souhaiterais que le menu de gauche, donc tout ce qui se trouve dans la première colonne soit en position : fixed pour suivre le déroulement du scroll.

Grâce à bootstrap j'utilise donc la classe 'affix' qui ajoute entre autre un 'position : fixed' à ma <div> et ça fonctionne .. MAIS ! mais mais mais il y a un méga mais :

Et bien du coup ce n'est plus responsive .. c'est a dire que maintenant quand je réduis la taille de ma page pour simuler un plus petit écran : la colonne du milieux passe sur la colonne de gauche, avant ça; la colonne de gauche rétrécissait pour que tout rentre dans la page.

Et donc  c'est moche et donc ça va pas et donc j'ai cherché mais j'ai pas trouvé

Je vous donne un petit screen car une image pourra mieux vous éclairer sur mon problème ainsi qu'un peu de code :

<div id="popo" class="container-fluid">
  <div class="row">
    <div class="col-md-2 hidden-sm hidden-xs">
      <div class="affix">
        <br/>
        <span id="closewindow" class="fa fa-window-close fa-2x pull-right" style=" bottom: 480px;"></span>
        <br/>
        <div class="row">
          <div class="col-md-12">
            <div class="block" style=" background-color:white;border: 3px black solid; bottom: 20px;";>
               CONTENU DE LA PREMIERE COLONNE 
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="pouet" class="col-md-7">
      CONTENU DE LA SECONDE COLONNE
    </div>

Première image : c'est bien quand on est sur grand écran :

Seconde image .. sur plus petit écran ça casse :

Voila donc je n'ai pas réussi à faire fonctionne cela correctement .. Si vous avez une astuce même sans la classe 'affix' de bootstrap je suis preneur ..

Cdt

Meca

-
Edité par Mecadie 18 septembre 2017 à 14:56:32

Bonjour,

Pourrais-tu nous fournir un code plus complet qu'on pourra tester et potentiellement débugger ? ca nous aidera à mieux identifier ton souci.

t_afif a écrit:

Bonjour,

Pourrais-tu nous fournir un code plus complet qu'on pourra tester et potentiellement débugger ? ca nous aidera à mieux identifier ton souci.

Hello

Oui bien sur je te donne une version avec deux colonnes seulement mais qui représente exactement le même problème. Pour le CSS c'est que du bootstrap

<div class="container-fluid" >
  <div class="row">
    <div class="col-md-2 hidden-sm hidden-xs">
      <div class="affix">
        <br/>
        <span id="closewindow" class="fa fa-window-close fa-2x pull-right" ></span>
        <br/>
        <div class="row">
          <div class="col-md-12">
            <div class="block" style=" background-color:white;border: 3px black solid;";>
              <br/>
              <p>Contenue du Side-bar</p>
              <img class="img-responsive" src="img/tech_support.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 col-md-offset-2" style=" background-color:white;border: 3px black solid;">
      <div class="row">
        <div class="col-md-12">
          <h3>Contenu de la colonne du milieux</h3>
        </div>
      </div>
      <div class="row ">
        <div class="col-md-12">
          <div class="jumbotron" style="background-color : #eee">
            <h2>CONTENU MILIEUX</h2>
            <hr/>
            <div class="row">
            <div class="col-md-12">
<p>Ut deserunt ex ipsum esse enim in ex qui irure amet ea reprehenderit. Nulla eu velit eu tempor aliquip ea dolore do laborum anim ullamco nostrud laboris. Nostrud mollit aliquip commodo qui sunt elit Lorem officia velit pariatur velit eiusmod enim nulla nostrud sint. Esse adipisicing dolor occaecat mollit nisi aliqua mollit magna consectetur aliqua elit veniam cupidatat proident cupidatat. Quis quis cupidatat ea duis proident officia irure veniam elit laboris enim qui qui et. Ad minim sint nulla ex non cillum non ut proident eiusmod voluptate officia. Laboris voluptate id dolore qui ullamco laborum anim sunt exercitation magna elit consequat sunt deserunt dolore elit qui. In nostrud elit occaecat Lorem laboris sit consectetur.</p>
<p>Velit irure exercitation exercitation velit aute aute consequat veniam. Consectetur occaecat ut ipsum sint aute veniam cupidatat et nostrud anim sint incididunt cupidatat. Ut sunt ex quis fugiat non officia ea sint cillum cupidatat irure ea incididunt. Veniam aliquip nisi sunt commodo irure nisi ad. Eiusmod labore reprehenderit incididunt commodo esse laborum adipisicing adipisicing ex nulla Lorem nulla fugiat in dolor. Incididunt ex quis Lorem minim dolor in irure excepteur velit elit. Enim deserunt exercitation quis nostrud sit consequat et culpa aute et in anim cupidatat.</p>
<p>Cillum officia culpa ullamco nulla adipisicing commodo non. In elit adipisicing exercitation anim officia tempor duis aute consequat eiusmod pariatur non esse laborum deserunt occaecat excepteur. Cupidatat aliqua dolore mollit tempor duis nisi cupidatat et sit duis sunt esse consequat velit ad est qui. Ex excepteur reprehenderit ipsum velit tempor irure id proident proident dolore non eu veniam ea. Ut nisi dolore nulla cillum eiusmod labore mollit id voluptate minim enim pariatur laboris. Magna minim magna voluptate sit non aliquip occaecat eiusmod aute irure. Id laborum dolor et ea deserunt id commodo sint ut pariatur quis elit.</p>
<p>Voluptate ad officia pariatur deserunt excepteur ad qui enim ad Lorem irure exercitation. Ipsum nisi amet deserunt magna irure quis ullamco. Laboris ad cillum id aliqua aute magna mollit nisi anim excepteur pariatur nostrud sunt reprehenderit deserunt excepteur adipisicing. Culpa aute laborum cillum nisi duis et culpa. Tempor dolore in irure enim pariatur aliqua qui in sint ipsum excepteur quis dolor incididunt reprehenderit in. Irure commodo sit aliqua culpa occaecat labore dolor ullamco irure irure. Dolor qui veniam adipisicing non incididunt labore Lorem Lorem quis sit ipsum esse. Ipsum proident pariatur id reprehenderit qui velit ea sunt elit ut ea ex officia ut.</p>
          </div>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

PS : tu peux vois dans la colonne 2 que je mets un 'col-md-offset-2' .. justement car sinon la colonne deux se superpose sur la colonne 1 .. à cause de la classe affixe, soit le position :fixed :/

-
Edité par Mecadie 18 septembre 2017 à 16:13:45