[Résolu]Scrollbar qui ne fonctionne pas...

Question

iBoB

4 Dec 2013 à 15:47

Bonjour à tous,
J'ai beaucoup de mal à trouver des renseignements sur le comportement des scrollbars par rapport aux placement de certains divs.. Je vous donne l'exemple suivant, ou le div nommé "#list_container" devrait se voir appliquer une scrollbar vu que ce dernier est trop long et dépasse de la page... Mais ce n'est pas le cas. (je pense que cela est du au "display: block" mais je n'ai pas d'autres solutions...)

Je sais, le code qui suit est long, mais il prends beaucoup de place pour pas grand chose et ca me permet de vous montrer clairement ce à quoi je voudrais arriver Smiley smile


<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
    
    <style> 
      body {
        margin: 0;
      }
      
      #menu_container {
        background-color: #31393D;
        width: 250px;
        height: 100%;
        left: 0;
        position: fixed;
      }
      
      #login_container {
        background-color: #282F33;
        width: 250px;
        height: 230px;
        left: 0;
      }
      
      #list_container {
        width: 250px;
        display: block;
        margin: 0;
        padding: 0;
        overflow: auto;
      }
      
      #list_container p {
        left: 20px;
        display: block;
        position: relative;
        font-size: 12pt;
        margin: 16px 0 0 20px;
        color: #cacaca;
      }
      
      #list_container li {
        width: 250px;
        height: 50px;
        float: left;
        display: block !important;
      }
      
      .category {
        border-top: 2px solid #282F33;
        background-color: #2C3438;
      }
      
      .category_b {
        border-top: 2px solid #282F33;
        background-color: #4e5254;
      }
</style>    
    
</head>

<body>
<div id="menu_container">
  <div id="login_container">
  </div>
  <ul id="list_container">
            <li class="category_b">
                <p>1</p>
            </li>
            <li class="category">
                <p>2</p>
            </li>
            <li class="category_b">
                <p>3</p>
            </li>
            <li class="category">
                <p>4</p>
            </li>
            <li class="category_b">
                <p>5</p>
            </li>
            <li class="category">
                <p>6</p>
            </li>
            <li class="category_b">
                <p>7</p>
            </li>
            <li class="category">
                <p>8</p>
            </li>
            <li class="category_b">
                <p>9</p>
            </li>
            <li class="category">
                <p>10</p>
            </li>
            <li class="category_b">
                <p>11</p>
            </li>
            <li class="category">
                <p>12</p>
            </li>
            <li class="category_b">
                <p>13</p>
            </li>
            <li class="category">
                <p>14</p>
            </li>
    </ul><!-- list_container -->
</div>


</body>
</html>

Modifié par iBoB (04 Dec 2013 - 20:24)

uniuc

4 Dec 2013 à 16:26

tiens du bidouillage tu peut coller un

overflow:scroll;

dans #menu_container

iBoB

4 Dec 2013 à 16:35

Non plus désolé Smiley cligne

J'ai même déjà essayé un "overfow-y: scroll;" sans succès... :f

Merci quand même Smiley lol

Peter-L

4 Dec 2013 à 16:39

Salut !

En fait ton overflow:auto doit s'appliquer au #menu_container pas à #list_container et tu ne dois pas attribuer de valeur relative à cette div (du moins pas 100%)

Je pense que ça devrait marcher j'ai essayé et ça fonctionne pour moi Smiley cligne

iBoB

4 Dec 2013 à 16:46

J'ai compris ce que tu veux dire et effectivement ca marche... mais c'est pas tout a fait ce que je veux Smiley lol

(oui je sais je suis chiant!! x)
Mais ça me permet de mieux reformuler ma question: "peut on appliquer une scrollbar sur une div à hauteur relative?" XD
Merci en tout cas Smiley cligne

Peter-L

4 Dec 2013 à 17:21

Alors

j'ai fait un test et ça fonctionne bien :

 body,html {
        margin: 0;
        height:100%;
          }

      body{
          position:relative;
    
      }
      #menu_container {
        background-color: #31393D;
        width: 250px;
        height: 100%;
        left: 0;
       overflow: auto;
      }
      
      #login_container {
        background-color: #282F33;
        width: 250px;
        height: 230px;
        left: 0;
      }
      
      #list_container {
        width: 250px;
        display: block;
        margin: 0;
        padding: 0;
        
      }
      
      #list_container p {
        left: 20px;
        display: block;
        position: relative;
        font-size: 12pt;
        margin: 16px 0 0 20px;
        color: #cacaca;
      }
      
      #list_container li {
        width: 250px;
        height: 50px;
        float: left;
        display: block !important;
      }
      
      .category {
        border-top: 2px solid #282F33;
        background-color: #2C3438;
      }
      
      .category_b {
        border-top: 2px solid #282F33;
        background-color: #4e5254;
      }

dis moi si c'est ce que tu recherches? Smiley biggrin

iBoB

4 Dec 2013 à 18:48

C'est prrrrreeeeeeesque ca Smiley cligne


body,html {
        margin: 0;
        height:100%;
          }

      body{
          position:relative;
    
      }
      #menu_container {
        background-color: #31393D;
        width: 250px;
        height: 100%;
        left: 0;
        position: fixed;
      }
      
      #login_container {
        background-color: #282F33;
        width: 250px;
        height: 230px;
        left: 0;
      }
      
      #list_container {
        width: 250px;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-y: auto;
        overflow-x: hidden;
      }
      
      #list_container p {
        left: 20px;
        display: block;
        position: relative;
        font-size: 12pt;
        margin: 16px 0 0 20px;
        color: #cacaca;
      }
      
      #list_container li {
        width: 250px;
        height: 50px;
        float: left;
        display: block !important;
      }
      
      .category {
        border-top: 2px solid #282F33;
        background-color: #2C3438;
      }
      
      .category_b {
        border-top: 2px solid #282F33;
        background-color: #4e5254;
      }

En gros y faudrait que ça donne ça sans la scrollbar qui glitch en dehors de l'écran, sauf que pour éviter ça, il faudrait pourvoir faire des trucs du genre "width: 100% - 230px;" mais le CSS3 a ses limites je suppose Smiley lol

Je crois bien que je vais me tourner vers mon ami le Javascript Smiley cligne

Merci beaucoup pour ton aide en tout cas, je compreds beaucoup mieux le comportement des scrollbars maintenant Smiley lol

Peter-L

4 Dec 2013 à 18:58

Ben en fait si tu suis ce que je t'ai fait ça ne sort pas!

Il ne faut pas de "position :fixed" à ton #menu_container

Et C'est pas sur #list_container que tu dois appliquer ton overflow mais sur #menu_container, comme je te l'ai dit plus haut Smiley cligne

Peter-L

4 Dec 2013 à 19:00

Je te mets le liens du jsFiddle pour que tu vois ce que ça donne:

http://jsfiddle.net/tZ3ZN/

6l20

4 Dec 2013 à 19:35

Sinon, en passant, s'il n'y a pas de contrainte particulière de rétrocompatibilité, pour s'amuser, et pour alléger un peu le HTML Smiley cligne

li:nth-child(odd) {
  border-top: 2px solid #282F33;
  background-color: #2C3438;
}
li:nth-child(even) {
  border-top: 2px solid #282F33;
  background-color: #4e5254;
}


<ul id="list_container">
  <li><p>1</p></li>
  <li><p>2</p></li>
  <li><p>3</p></li>
  <li><p>4</p></li>
  <li><p>5</p></li> etc...

iBoB

4 Dec 2013 à 19:40

J'avais déja vu ce que ça donnait avec ton code et je l'ai modifié exprès ^^
Je ne veux pas que l'espace login soit compris dans le scroll et il faut absolument que le #menu_container soit en fixed car il faut qu'il reste fixe lords du défilement de la page...
D'ou le fait que j'ai appliqué le scroll au #list_container et non au menu_container et que j'ai repassé en fixed.
Le scroll ne doit être fait que dans la liste ^^

Je t'ai mis un aperçu de ce que ça doit donner: http://jsfiddle.net/tZ3ZN/3/
Dans cet exemple, j'ai mis les height en % donc ça fonctionne, mais seulement pour l'exemple car pour mon site final, il est nécessaire que le div de login ai une hauteur fixe de 230px et non en %. J'ai donc substitué le problème par un autre pour te montrer le visuel final que la page est sensée donnée. Smiley cligne

iBoB

4 Dec 2013 à 19:43

6l20 a écrit :
Sinon, en passant, s'il n'y a pas de contrainte particulière de rétrocompatibilité, pour s'amuser, et pour alléger un peu le HTML Smiley cligne

li:nth-child(odd) {
  border-top: 2px solid #282F33;
  background-color: #2C3438;
}
li:nth-child(even) {
  border-top: 2px solid #282F33;
  background-color: #4e5254;
}


&lt;ul id=&quot;list_container&quot;&gt;
  &lt;li&gt;&lt;p&gt;1&lt;/p&gt;&lt;/li&gt;
  &lt;li&gt;&lt;p&gt;2&lt;/p&gt;&lt;/li&gt;
  &lt;li&gt;&lt;p&gt;3&lt;/p&gt;&lt;/li&gt;
  &lt;li&gt;&lt;p&gt;4&lt;/p&gt;&lt;/li&gt;
  &lt;li&gt;&lt;p&gt;5&lt;/p&gt;&lt;/li&gt; etc...

XD merci, j’avoue que j'ai un peu codé ça avec des sabots de cheval! Mais c'est surtout pour ne pas balancer tout le code brut de mon site Smiley langue

Merci en tt cas Smiley cligne

Peter-L

4 Dec 2013 à 19:57

Ah oui pardon Smiley confused

, j'avais pas capté l'histoire du #login_container...

Dans ton cas du coup, c'est valeur fixe ou valeur %... les deux ensemble c'est ingérable... Smiley decu

iBoB

4 Dec 2013 à 20:23

Bah, j'aurais tenté au moins Smiley cligne

Merci beaucoup!! Sujet clos Smiley smile

kustolovic

Modérateur

4 Dec 2013 à 21:28

Peter-L a écrit :

Dans ton cas du coup, c'est valeur fixe ou valeur %... les deux ensemble c'est ingérable... Smiley decu

iBoB a écrit :

Bah, j'aurais tenté au moins

Merci beaucoup!! Sujet clos

Ah ben non faut pas abandonner si vite! Il y a des solutions pourtant:

la plus compatible et qu'on a tendance à oublier à cause d'un long manque de support dans IE (IE7+ , Firefox 1/2? webkit 1 … )


#login_container {
        height: 230px;
}
      
#list_container {
        position: absolute;
        top: 230px;
        bottom: 0;
        /** Laisser le height en auto **/
 }

On pourrait s'en sortir à base de tableaux CSS, mais ça demanderait au moins l'ajout d'une div, et c'est moins compatible…

Avec calc(): (IE9+, firefox 16, Chrome 26, tous les détails là http://caniuse.com/#feat=calc )


  height: calc(100% -230px)

Donc oui, c'est possible, et ça marche!
Modifié par kustolovic (04 Dec 2013 - 21:28)

gc-nomade

4 Dec 2013 à 23:11

Bonsoir,

personne n'évoque le sizing-box ? avec une architecture :

<div>
   <ul>
      <li></li>
      ...
   </ul>
</div>

http://codepen.io/anon/pen/mLGHJ

malheureusement, pour les vieux IE, ça voudrait dir du mode quirk pour basculer dans un autre box-model

kustolovic

Modérateur

4 Dec 2013 à 23:39

Ah tiens j'y avais pensé, puis n'avais pas vu de solution simple pour y arriver dans ce cas de figure. Comme quoi, ça peut toujours nous échapper Smiley langue

En tout cas les solutions ne manquent pas.

Peter-L

5 Dec 2013 à 07:52

Bien vu @gc-nomade!!!! je n'y avais pas penser parce que je n'ai pas l'habitude de l'utiliser... Je devrai peut être m'y mettre au box-sizing Smiley cligne

Sujet clos

CSS et mise en forme, CSS3

[Résolu]Scrollbar qui ne fonctionne pas...