Hauteur qui s'adapte à la taille de l'écran

[Ayael]

Bonjour,
Je suis en train d’installer une colonne (rétractable) à gauche de mon forum, visible sur toutes les pages.
Je voudrais que la hauteur s’adapte pour occupé tout l’écran (en hauteur seulement, la largeur elle, resterait fixe.)

Si je ne suis pas très clair, je pourrais essayer de trouver des exemples!

J'ai essayé de mettre un

Code:

height:100%; display:block;

dans ma class "colonne"
mais ça n'a pas fonctionné... J'ignore s'il faut l'associer avec un autre élément...

Code:

<div id="contain">
    <div class="borderCol"><div class="imagedragon"><div class="colonne">
    Contenu de ma colonneeeee
     
 </div></div>  </div>
   <div onclick="togglePanel(this);" class="divider"> </div>   
   
   <div class="centerCol">   
<table style="position: fixed; top: 0px; right: -2px; text-align:center;  z-index:1000; width: 100%;"><tr><td><center>
   
   
<div class="fond_couleur_progresive"><font color:#fff;>{GENERATED_NAV_BAR}</font></div>
 
 
   
   
   
    </center>  </td></tr></table>
   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="20" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                                          <!-- END switch_logo_left --></tr><tr>
                  
                                         
                                          <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
                                  </tr><tr><td><div class="citation1style"><div class="citation1"></div></div></td></tr>
            </table>

            

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
    </div>
 
  </div>
</body>
</html>
<!-- END html_validation -->
 

et le CSS :

Code:



.colonne {
 
  background-color: rgba(73, 37, 25, 0.7);
  color:#fff;
 padding-left:10px;
  padding-top:20px;
  padding-bottom:20px;
  width:240px;
 text-shadow:0px 0px 2px #FBDEBA;
  font-family:andalus;
}


/*une image de fond qui prend toute la taille de l'écran et qui doit toujours rester fixe*/
.imagedragon {
  background-image:url("http://img15.hostingpics.net/pics/333921kazumasauchioucchiey002.png");
  background-attachment:fixed;
 background-repeat:no-repeat;
 
 
}


div.borderCol, div.divider {
float:left;
border:none;
}

.borderCol {
width:240px;
margin-left:-8px;
 }

.centerCol { /*correspond à toute la partie "forum"*/
position:relative;
width:790px;
left:0px;
}

div.centerCol {float:left;}

/*barre où il faut cliquer pour fermer*/
.divider {
width:8px;
background-color:#2B160F!important;
cursor:pointer;
margin-bottom:-10px;
}



Merci d'avance à ceux qui m'aideront ♥

[Ayael]

toujours d'actualité bien sûre..

[Ea]

Bonjour,


Style comme la chatbox déroulante, mais sur toute la hauteur de l'écran ?

Si c'est cela j'imagine que si l'élément à une classe colgauche on peut mettre soit quelque chose du style :

Code:

.colgauche {
  position: fixed;
  width: 50px;
  top: 0;
  bottom: 0;
  left: 0;
  background: red;
}

( donc dire que c'est à 0 du bas et 0 du haut )

Ou bien quelque chose comme ceci :

Code:

.colgauche {
  position: fixed;
  width: 50px;
  top: 0;
  height: 100%;
  left: 0;
  background: red;
}

( donc dire que c'est à 0 du haut et que ça a une hauteur de 100% )

Cordialement.

[Ayael]

Bonjour, merci de vous intéresser à mon problème : La colonne elle doit défiler, de plus j'ai essayé d'autre propriété à position et rien n'a marché..; (Absolute, relative...)
Je voudrais donc que quand on scroll tout en bas du forum, la colonne continue (mais on verrait un espace vide, puisque le contenu resterait en haut du forum, comme pour une bannière de fond par exemple)
Je ne sais pas si je suis très clair?

J'ai fais un exemple tout bête : http://version5.lebonforum.com/h2-page-vierge

Comme vous le voyez avec ce code:

Code:

float:left;
height: 100%; height: 100%;
bottom:0px;
left:0px;
position:absolute;
top:0px;
width:240px;
background-color:#000;


La colonne prend bien toute la hauteur de l'écran, mais quand on scroll on voit qu'elle ne va pas tout en bas de l'écran

Moi je voudrais qu'elle aille tout en ba,s qu'on puisse scroller autant qu'on veut, la colonne s'adapte qu'elle soit collé en haut et bas !

[Ea]

Apparemment, il faut ajouter :

Code:

body { position: relative; }

Ensuite vous devriez pouvoir utiliser le top et bottom à 0 ou le top à 0 et le width à 100%.

Cordialement.

[Ayael]

Il se trouve que ça marche sur le schéma simplifié, mais pas sur la version normal >.< J'ai pourtant essayé de créé une nouvelle classe, de le mettre dans bordercol div.bordercol et colonne ^^"

[Ea]

Un lien pour voir le problème quelque part ?


Cordialement.

[Ayael]

Bien sûre : http://version5.lebonforum.com/ (là c'est avec le code dans la class "colonne"

[Ea]

Si vous mettez un bloc en position absolute, il sort du flux des éléments normaux ( donc il ne prend plus la place qu'il prenait sur la page ) et vous le mettez à la position que vous souhaitez.

Et c'est à votre code css de faire de l'espace en dessous si nécessaire.

Donc là vous devriez probablement mettre une marge négative à gauche de l'élément parent, donc dans votre cas ( en regardant un peu vous semblez plutôt être en float mais ça marche quand même ) :

Code:

#contain {
  padding-left: 240px;
}

Voilà quelques tutoriels sur le positionnement css qui pourraient aider :

- http://openweb.eu.org/articles/initiation_flux/
- http://openweb.eu.org/articles/initiation_float/
- http://openweb.eu.org/articles/initiation_absolue

- http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html
- http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html
- http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html

[Ayael]

Oui, je m'en doutais pour le pading, mais c'est surtout qu'il n'y a pas de fond le problème... (Enfin si, il y en a un morceau tout en haut qui s'arrête avant le texte)
Merci à toi en tout cas de m'aider!

[Ayael]

toujours d'actualité^^

[Ayael]

toujours d'actualité... Je suppose que ça simplifierais les choses si je supprimer l'effet rétractable qui ne sert pas à grand chose

[Ayael]

Je me suis débrouillé pour la hauteur, mais du coup le dragon n'apparait plus!

Edit: j'ai réussi, problème résolu donc!

[Ea]

Bonjour,


Là : http://version5.lebonforum.com/# je vois bien en fond un dragon à gauche.

Cordialement.

[Ayael]

Oui je viens d'éditer pour signaler que j'avais réussis finalement!
Merci pour votre aide!