Comment ajouter une barre de défilement sur la page web?

J'ai une page web construite avec html et css sur lequel le contenu est découpé le bas de la page. Je voudrais ajouter du défilement de la page, mais je suis incapable de le faire. J'ai essayé la traditionnelle html{ overflow: scroll;} ou html { overflow: auto;} et ni semble fonctionner. Je suis en train de travailler avec google chrome et l'ai essayé sur safari aussi, mais la barre de défilement ne semble jamais à apparaître. Je voudrais savoir ce que je suis absent et serait vraiment reconnaissant de toute aide à faire la page web de défilement.

Et je suis en utilisant la position: fixe et ne suis pas à l'aide de position: relative, j'ai lu quelque part que peut faire une différence, mais je suis en espérant contre toute espérance, il ne coz je vais devoir changer beaucoup de choses si je fais ce changement. S'il vous plaît ne laissez-moi savoir si il ya un moyen de rendre la page web de défilement avec correction du positionnement ou si c'est bien le problème.

Toute aide serait grandement appréciée.

J'ai posté mon code ci-dessous, je m'excuse pour le très salissant code à l'avance, je suis très nouveau 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>

pouvez-vous partager votre code?
Fixe est probablement votre question, serait-position:absolute pas vous aider? sans voir le code ou un lien c'est dur à dire.
Position fixe est votre problème.

OriginalL'auteur anonuser0428 | 2012-10-27

Vous pouvez essayer d'ajouter un élément avec la propriété clair ensemble de les deux être le dernier élément dans le conteneur qui a position fixe. 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:

 .fixedDiv
{
position: fixed;
}
.clear
{
clear: both;
}

Si vous avez besoin d'avoir un div qui a pour avoir position ensemble de relative, vous pouvez ajouter une autre div en tant qu'enfant de l'élément de 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:

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

OriginalL'auteur Danilo Radenovic

0

Position: fixed endroits les éléments en question par rapport à la fenêtre du navigateur. Je ne pense pas que vous voulez être à l'aide de ce.

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

OriginalL'auteur Brendonwbrown

Vous devez vous connecter pour publier un commentaire.