Come aggiungere la barra di scorrimento alla pagina Web?

Ho una pagina Web creata con html e css su cui il contenuto viene ritagliato nella parte inferiore della pagina. Vorrei aggiungere lo scorrimento alla pagina ma non sono in grado di farlo. Ho provato il tradizionale html {overflow: scroll;} o html {overflow: auto;} e nessuno dei due sembra funzionare. Sto lavorando con google chrome e l'ho provato anche su Safari ma la barra di scorrimento non sembra mai apparire. Mi piacerebbe sapere cosa mi manca e apprezzerei davvero qualsiasi aiuto nel far scorrere la pagina web.Come aggiungere la barra di scorrimento alla pagina Web?

E sto usando la posizione: fisso e non sto usando la posizione: relativo, ho letto da qualche parte che potrebbe fare la differenza ma spero contro la speranza che non coz sto andando a dover cambiare molte cose se faccio questo cambiamento. Per favore fatemi sapere se esiste un modo per far scorrere la pagina web con un posizionamento fisso o se questo è il problema.

Qualsiasi aiuto sarebbe molto apprezzato.

Ho inviato il mio codice qui sotto, mi scuso per il codice molto disordinato in anticipo, Sono molto nuovo per lo sviluppo 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>

fonte

2012-10-27 anonuser0428

puoi condividere il tuo codice? – Anoop

Corretto è probabilmente il tuo problema, posizionerebbe: assoluto non ti aiuta? senza vedere il codice o un link è difficile da dire. – Modika

La posizione corretta è il tuo problema. –

si può provare l'aggiunta di un elemento con proprietà chiaro insieme a sia sia l'ultimo elemento nel contenitore che ha la posizione fissa. Per esempio:

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

E il css sarà simile:

.fixedDiv 
    { 
     position: fixed; 
    } 

    .clear 
    { 
     clear: both; 
    }

Se è necessario disporre di un div che deve avere posizione insieme a relativa, è possibile aggiungere un altro div come un elemento figlio su riparatoDiv. Per esempio:

<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>

E il css sarà simile:

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

fonte

2012-10-27 18:28:18

Position: fixed posti gli elementi in questione rispetto alla finestra del browser. Non penso che tu voglia usare questo.

Piuttosto, utilizzare position: absolute, che in questo caso consente di posizionare gli elementi relativi all'elemento html.

fonte

2014-11-13 02:15:47 Brendonwbrown

Come aggiungere la barra di scorrimento alla pagina Web?

risposta

Problemi correlati