Comment ajouter une barre de défilement à une page Web?

J'ai une page Web construite avec html et css sur laquelle le contenu est coupé au bas de la page. Je voudrais ajouter un défilement à la page mais je suis incapable de le faire. J'ai essayé le traditionnel html {overflow: scroll;} ou html {overflow: auto;} et aucun ne semble fonctionner. Je travaille avec Google Chrome et je l'ai essayé sur Safari mais la barre de défilement ne semble jamais apparaître. Je voudrais savoir ce qui me manque et apprécierais vraiment toute aide pour faire défiler la page Web.Comment ajouter une barre de défilement à une page Web?

Et j'utilise la position: fixe et n'utilise pas la position: relative, j'ai lu quelque part qui pourrait faire une différence, mais je espère contre l'espoir que ça ne va pas car je vais devoir changer beaucoup de choses si je fais ce changement. S'il vous plaît faites-moi savoir s'il existe un moyen de faire défiler la page Web avec un positionnement fixe ou si c'est le problème.

Toute aide serait grandement appréciée.

J'ai posté mon code ci-dessous, je présente mes excuses pour le code très salissant à l'avance, je suis très nouveau pour le développement web:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
html 
{ 
    overflow: scroll; 
} 

th 
{ 
    left:700px; 
    top:300px; 
    position:fixed; 
} 
td.first_name_text 
{ 
    left:700px; 
    top:330px; 
    position:fixed; 
    background-image:url(required-field.png); 
    background-position:top right; 
    background-repeat:no-repeat; 
    padding-right:10px; 
} 
td.first_name_textbox 
{ 
    left:854px; 
    top:330px; 
    position:fixed; 
} 
td.last_name_text 
{ 
    left:700px; 
    top:378px; 
    position:fixed; 
    background-image:url(required-field.png); 
    background-position:top right; 
    background-repeat:no-repeat; 
    padding-right:10px; 
} 
td.last_name_textbox 
{ 
    left:854px; 
    top:378px; 
    position:fixed; 
} 
td.email_text 
{ 
    left:700px; 
    top:426px; 
    position:fixed; 
    background-image:url(required-field.png); 
    background-position:top right; 
    background-repeat:no-repeat; 
    padding-right:10px; 
} 
td.email_textbox 
{ 
    left:854px; 
    top:426px; 
    position:fixed; 
} 
td.dob_text 
{ 
    left:700px; 
    top:474px; 
    position:fixed; 
    background-image:url(required-field.png); 
    background-position:top right; 
    background-repeat:no-repeat; 
    padding-right:10px; 
} 
td.dob_month_textbox 
{ 
    left:824px; 
    top:474px; 
    position:fixed; 
} 
td.dob_day_textbox 
{ 
    left:969px; 
    top:474px; 
    position:fixed; 
} 
td.dob_year_textbox 
{ 
    left:1056px; 
    top:474px; 
    position:fixed; 
} 
td.sex_text 
{ 
    left:700px; 
    top:510px; 
    position:fixed; 
    background-image:url(required-field.png); 
    background-position:top right; 
    background-repeat:no-repeat; 
    padding-right:10px; 
} 
td.loginId_text 
{ 
    left:700px; 
    top:550px; 
    position:fixed; 
    background-image:url(required-field.png); 
    background-position:top right; 
    background-repeat:no-repeat; 
    padding-right:10px; 
} 
td.loginId_textbox 
{ 
    left:790px; 
    top:550px; 
    position:fixed; 
} 
td.password_text 
{ 
    left:700px; 
    top:580px; 
    position:fixed; 
    background-image:url(required-field.png); 
    background-position:top right; 
    background-repeat:no-repeat; 
    padding-right:10px; 
} 
td.password_textbox 
{ 
    left:790px; 
    top:570px; 
    position:fixed; 
} 
td.confirm_password_text 
{ 
    left:790px; 
    top:570px; 
    position:fixed; 
    background-image:url(required-field.png); 
    background-position:top right; 
    background-repeat:no-repeat; 
    padding-right:10px; 
} 


</style> 

</head> 

<body> 
<form name="user_registration_form" metod="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> 
<table> 
    <tr> 
     <th>User Registration<th> 
    </tr> 
    <tr> 
     <td class="first_name_text" style="font-size:18px;">Patient First Name</td> 
     <td class="first_name_textbox"><input type="text" name="first_name" maxlength="30" size="40" style="height:30px;font-size:14pt;" ></td> 
    </tr> 
    <tr> 
     <td class="last_name_text" style="font-size:18px;">Patient Last Name</td> 
     <td class="last_name_textbox"><input type="text" name="last_name" maxlength="30" size="40" style="height:30px;font-size:14pt;"></td> 
    </tr> 
    <tr> 
     <td class="email_text" style="font-size:18px;">Patient Email</td> 
     <td class="email_textbox"><input type="text" name="email" maxlength="30" size="40" style="height:30px;font-size:14pt;"></td> 
    </tr> 
    <tr> 
     <td class="dob_text" style="font-size:18px;">Date of Birth: </td> 
     <td class="dob_month_textbox" style="padding-left:2em">Month <SELECT NAME="Month"> 
      <OPTION SELECTED>January<OPTION>February<OPTION>March<OPTION>April 
      <OPTION>May<OPTION>June<OPTION>July<OPTION>August 
      <OPTION>September<OPTION>October<OPTION>November<OPTION>December 
      </SELECT> 
     </td> 
     <td class="dob_day_textbox" style="padding-left:2.5em">Day <Select Name="Day"> 
      <OPTION SELECTED>1<OPTION>2<OPTION>3<OPTION>4 
      <OPTION>5<OPTION>6<OPTION>7<OPTION>8 
      <OPTION>9<OPTION>10<OPTION>11<OPTION>12<OPTION>13<OPTION>14<OPTION>15 
      <OPTION>16<OPTION>17<OPTION>18<OPTION>19 
      <OPTION>20<OPTION>21<OPTION>22<OPTION>23<OPTION>24<OPTION>25<OPTION>26 
      <OPTION>27<OPTION>28<OPTION>29<OPTION>30 
      <OPTION>31 
      </SELECT> 
     </td> 
     <td class="dob_year_textbox" style="padding-left:3em">Year <select name="Year"> 
<option value="2012">2012</option> 
<option value="2011">2011</option> 
<option value="2010">2010</option> 
<option value="2009">2009</option> 
<option value="2008">2008</option> 
<option value="2007">2007</option> 
<option value="2006">2006</option> 
<option value="2005">2005</option> 
<option value="2004">2004</option> 
<option value="2003">2003</option> 
<option value="2002">2002</option> 
<option value="2001">2001</option> 
<option value="2000">2000</option> 
<option value="1999">1999</option> 
<option value="1998">1998</option> 
<option value="1997">1997</option> 
<option value="1996">1996</option> 
<option value="1995">1995</option> 
<option value="1994">1994</option> 
<option value="1993">1993</option> 
<option value="1992">1992</option> 
<option value="1991">1991</option> 
<option value="1990">1990</option> 
<option value="1989">1989</option> 
<option value="1988">1988</option> 
<option value="1987">1987</option> 
<option value="1986">1986</option> 
<option value="1985">1985</option> 
<option value="1984">1984</option> 
<option value="1983">1983</option> 
<option value="1982">1982</option> 
<option value="1981">1981</option> 
<option value="1980">1980</option> 
<option value="1979">1979</option> 
<option value="1978">1978</option> 
<option value="1977">1977</option> 
<option value="1976">1976</option> 
<option value="1975">1975</option> 
<option value="1974">1974</option> 
<option value="1973">1973</option> 
<option value="1972">1972</option> 
<option value="1971">1971</option> 
<option value="1970">1970</option> 
<option value="1969">1969</option> 
<option value="1968">1968</option> 
<option value="1967">1967</option> 
<option value="1966">1966</option> 
<option value="1965">1965</option> 
<option value="1964">1964</option> 
<option value="1963">1963</option> 
<option value="1962">1962</option> 
<option value="1961">1961</option> 
<option value="1960">1960</option> 
<option value="1959">1959</option> 
<option value="1958">1958</option> 
<option value="1957">1957</option> 
<option value="1956">1956</option> 
<option value="1955">1955</option> 
<option value="1954">1954</option> 
<option value="1953">1953</option> 
<option value="1952">1952</option> 
<option value="1951">1951</option> 
<option value="1950">1950</option> 
<option value="1949">1949</option> 
<option value="1948">1948</option> 
<option value="1947">1947</option> 
<option value="1946">1946</option> 
<option value="1945">1945</option> 
<option value="1944">1944</option> 
<option value="1943">1943</option> 
<option value="1942">1942</option> 
<option value="1941">1941</option> 
<option value="1940">1940</option> 
<option value="1939">1939</option> 
<option value="1938">1938</option> 
<option value="1937">1937</option> 
<option value="1936">1936</option> 
<option value="1935">1935</option> 
<option value="1934">1934</option> 
<option value="1933">1933</option> 
<option value="1932">1932</option> 
<option value="1931">1931</option> 
<option value="1930">1930</option> 
<option value="1929">1929</option> 
<option value="1928">1928</option> 
<option value="1927">1927</option> 
<option value="1926">1926</option> 
<option value="1925">1925</option> 
<option value="1924">1924</option> 
<option value="1923">1923</option> 
<option value="1922">1922</option> 
<option value="1921">1921</option> 
<option value="1920">1920</option> 
<option value="1919">1919</option> 
<option value="1918">1918</option> 
<option value="1917">1917</option> 
<option value="1916">1916</option> 
<option value="1915">1915</option> 
<option value="1914">1914</option> 
<option value="1913">1913</option> 
<option value="1912">1912</option> 
<option value="1911">1911</option> 
<option value="1910">1910</option> 
<option value="1909">1909</option> 
<option value="1908">1908</option> 
<option value="1907">1907</option> 
<option value="1906">1906</option> 
<option value="1905">1905</option> 
<option value="1904">1904</option> 
<option value="1903">1903</option> 
<option value="1902">1902</option> 
<option value="1901">1901</option> 
<option value="1900">1900</option> 
</select> 
    </tr> 
    <tr> 
     <td class="sex_text" style="font-size:18px;">Sex:</td> 
     <td class="sex_radioButtons"> 
      <input type="radio" name="sex" value="male" style="left:766px;top:510px;position:fixed;"><td style="left:788px;top:510px;position:fixed;">Male</td> 
      <input type="radio" name="sex" value="female" style="left:834px;top:510px;position:fixed;"><td style="left:856px;top:510px;position:fixed;">Female</td> 
     </td> 
    </tr> 
    <tr> 
     <td class="loginId_text" style="font-size:17px;">Login ID:</td> 
     <td class="loginId_textbox"> 
      <input type="text" name="loginId" maxlength="10" size="25" style="height:28px;font-size:14pt;"> 
     </td> 
     <td class="password_text" style="font-size:17px;">Password:</td> 
     <td class="password_textbox"> 
      <input type="text" name="password" maxlength="25" size="25" style="height:28px;font-size:14pt;"> 
     </td> 
     <td class="confirm_password_text" style="font-size:17px;padding-left:2em" ">Confirm Password:</td> 
     <td class="confirm_password_textbox"> 
      <input type="text" name="confirm_password" maxlength="25" size="25" style="height:28px;font-size:14pt;"> 
     </td> 
</table> 

</body> 



</html>

Source

2012-10-27 anonuser0428

pouvez-vous partager votre code? – Anoop

Fixe est probablement votre problème, serait position: absolu ne vous aide pas? sans voir le code ou un lien c'est difficile à dire. – Modika

La position corrigée correspond à votre problème. –

Vous pouvez essayer d'ajouter un élément à la propriété clair ensemble à les deux être le dernier élément dans votre conteneur qui a positionfixe. Par exemple:

<div class='fixedDiv'> 
    <p> Some element here...</p> 
    <p> Another one... </p> 
    <a> And a link to somewhere...</a> 
    <br class='clear'> 
</div>

Et le css ressemblerait à ceci:

.fixedDiv 
    { 
     position: fixed; 
    } 

    .clear 
    { 
     clear: both; 
    }

Si vous avez besoin d'avoir un div qui doit avoir la position ensemble à par rapport, vous pouvez ajouter un autre div comme un élément enfant à fixedDiv. Par exemple:

<div class='fixedDiv'> 
    <div class='relativeDiv'> 
     <p> Some element here...</p> 
     <p> Another one... </p> 
     <a> And a link to somewhere...</a> 
     <br class='clear'> 
    </div> 
</div>

Et le css ressemblerait à ceci:

.relativeDiv 
{ 
    position: relative; 
    width: 100%; // to consume the whole space from fixedDiv 
    height: 100%; 
}

Source

2012-10-27 18:28:18

Position: fixed place les éléments en question par rapport à la fenêtre du navigateur. Je ne pense pas que tu veuilles l'utiliser.

Utilisez plutôt position: absolute, ce qui vous permettra dans ce cas de placer des éléments par rapport à l'élément html.

Source

2014-11-13 02:15:47 Brendonwbrown

Comment ajouter une barre de défilement à une page Web?

Répondre

Questions connexes