Traiter une zone déroulante dans une page HTML sans les frames

Publié le 21/10/2008 HTML

<?php
  echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\">\n";
  echo "<html>\n";
  echo "  <head>\n";
  echo "    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n";
  echo "    <title>Comptabilité</title>\n";
  echo "    <link href='/favicon.ico' rel='shortcut icon' type='image/x-icon' >\n";
  echo "    <link rel='stylesheet' media='screen,all' href='style.css'>\n";
  echo "  </head>\n";
  echo "  \n";
  echo "  <body>\n";
  echo "<table class='taball' cellspacing='0' cellpadding='0'>\n";
  echo "  <tr><td class='logo'>Logo</td></tr>\n";
  echo "  <tr><td class='titre'>Titre</td></tr>\n";
  echo "  <tr><td class='menu'>Menu</td></tr>\n";
  echo "  <tr><td class='saisie'>\n";
  echo "    <input type='text' id='date' value='$date'>\n";
  echo "    <input type='text' id='design' value='$design'>\n";
  echo "    <input type='text' id='valeur' value='$valeur'>\n";
  echo "    <span class='btn' onclick=\"makeRequest('test.xml')\">OK</span>\n";
  echo "  </td></tr>\n";
  echo "  <tr><td class='erreur'>Erreur</td></tr>\n";
  echo "  <tr><td class='centre'>\n";
  echo "    <div class='centre1'>\n";
  echo "      <div class='centre2'>\n";
for ($i=0;$i<=950;$i++)
echo "ligne $i<br>\n";
  echo "      </div>\n";
  echo "    </div>\n";
  echo "  </td>\n";
  echo "  </tr>\n";
  echo "  <tr>\n";
  echo "    <td class='pieddepage'>\n";
  echo "Pied de page\n";
  echo "    </td>\n";
  echo "  </tr>\n";
  echo "</table>";
?>

Feuille de style nécessaire :

html, body {
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0px;
  padding:0px;
}

table.taball {
  position:absolute;
  width:100%;
  height:100%;
}
td.menu {
  background-color: #e0e0e0;
  border-bottom: 1px #ff0000 solid;
}

td.saisie {
  border-bottom: 1px #ff0000 solid;
}
td.erreur {
  border-bottom: 1px #ff0000 solid;
}
td.centre {
  border-bottom: 1px #ff0000 solid;
  height: 100%;
  vertical-align: top;
}
div.centre1 {
  height: 100%;
  position: relative;
}
div.centre2 {
  overflow: auto;    /* Affiche un ascenseur si la zone de centre devient trop
                        grande */
  height: 100%;
  position: absolute;
  width: 100%;
}