28219 sujets

CSS et mise en forme, CSS3

Pb avec le scroll

Bonjour,
Je souhaite appliquer un scroll à une section de ma page mais rien ne marche
Voici mon code :
file scrolling.php
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
   <title>TEST SCROLL</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link type="text/css" rel="stylesheet" href="scrolling.css" title="styles">

</head>
<body>
   <table id="main" cellspacing="0" cellpadding="0" border="1">
      <tr>
         <td colspan="2" id="header">
            ZONE HEADER
         </td>
      </tr>
      <tr>
         <td id="sidebar">
            ZONE SIDEBAR
         </td>
         <td id="content">
            <div id="scrolling">
              {#TEXTE ASSEZ LONG}
            </div>
         </td>
      </tr>
   </table>
</body>
</html>


file scrolling.css
body
{
   font-family:Helvetica, Verdana, Arial, sans-serif;
   font-size: 14px;
   color:#000000;
   text-align: center;
   overflow:hidden;
}

#main
{
   margin-left:auto;
   margin-right:auto;
   width:800px;
   text-align:left;
   height:100%;
   border-spacing:0;
}

#header {
   height:100px;
}

#sidebar {
   width:200px;
}

#content {
   width:600px;
   vertical-align:top;
}

#scrolling {
   width: 600px;
   margin:0;
   position:relative;
   overflow-y: scroll;
   overflow-X:hidden;
   height:100%;
   background-color:#FFF;
   border:1px solid red;
}

Quand la hauteur est fixée en pixel, ça marche bien mais dès que l'ai en pourcentage afin d'occuper la hauteur totale de la cellule (height:100%), rien ne va plus.
Quelle serait l'astuce pour resoudre ce pb ?
Merci d'avance
Sujet clos
Aller à