Traiter une zone déroulante dans une page HTML sans les frames
<?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%;
}
