如何添加滚动条到网页？ [英] How to add scroll bar to webpage?
本文介绍了如何添加滚动条到网页？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个使用html和css建立的网页，其中的内容在页面底部被裁剪。我想添加滚动到页面，但无法这样做。我试过传统的html {overflow：scroll;}或html {overflow：auto;}，似乎都不工作。我使用google chrome和已经尝试了safari也，但滚动条从来似乎不出现。我想知道我失踪了什么，真的很感谢任何帮助，使网页滚动。
我使用position：fixed和am不使用position：relative ，我读的地方，可能会有所作为，但希望反对希望，它不会coz我将不得不改变许多事情，如果我做出改变。请让我知道是否有一个方法使网页滚动与固定的位置或是否是这个问题。
任何帮助将非常感激。 >
我已经张贴我的代码在下面，我为事先的杂乱的代码道歉，我是新的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（require-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_formmetod =postaction =<？php echo $ _SERVER ['PHP_SELF'];？>>
< table>
< tr>
< th>用户注册< th>
< / tr>
< tr>
< td class =first_name_textstyle =font-size：18px;>患者名字< / td>
< td class =first_name_textbox>< input type =textname =first_namemaxlength =30size =40style =height：30px; font-size：14pt; 。 >< / td>
< / tr>
< tr>
< td class =last_name_textstyle =font-size：18px;>病人姓氏< / td>
< td class =last_name_textbox>< input type =textname =last_namemaxlength =30size =40style =height：30px; font-size：14pt; >< / td>
< / tr>
< tr>
< td class =email_textstyle =font-size：18px;>患者电子邮件< / td>
< td class =email_textbox>< input type =textname =emailmaxlength =30size =40style =height：30px; font-size：14pt; >< / td>
< / tr>
< tr>
< td class =dob_textstyle =font-size：18px;>出生日期：< / td>
< td class =dob_month_textboxstyle =padding-left：2em> Month< SELECT NAME =Month>
< OPTION SELECTED>一月< OPTION>二月< OPTION>三月< OPTION>四月
< OPTION>五月< OPTION>六月< OPTION>七月< OPTION>八月
< OPTION ; September< OPTION>十月< OPTION>十一月< OPTION>十二月
< / SELECT>
< / td>
< td class =dob_day_textboxstyle =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
& ; 9< OPTION> 10< OPTION> 11< OPTION> 12< OPTION> 13< OPTION> b选项> 20< OPTION> 21< OPTION> 20< OPTION> 21< OPTION> 22< OPTION> 23< OPTION> 30
< OPTION> 31
< / SELECT>
< / td>
< td class =dob_year_textboxstyle =padding-left：3em>年< select name =年>
< 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_textstyle =font-size：18px;>性别：< / td>
< td class =sex_radioButtons>
< input type =radioname =sexvalue =malestyle =left：766px; top：510px; position：fixed;>< td style =left：788px; top：510px; position：fixed;>男性< / td>
< input type =radioname =sexvalue =femalestyle =left：834px; top：510px; position：fixed;>< td style =left：856px; top：510px; position：fixed;>女性< / td>
< / td>
< / tr>
< tr>
< td class =loginId_textstyle =font-size：17px;>登录ID：< / td>
< td class =loginId_textbox>
< input type =textname =loginIdmaxlength =10size =25style =height：28px; font-size：14pt;&
< / td>
< td class =password_textstyle =font-size：17px;>密码：< / td>
< td class =password_textbox>
< input type =textname =passwordmaxlength =25size =25style =height：28px; font-size：14pt;&
< / td>
< td class =confirm_password_textstyle =font-size：17px; padding-left：2em> Confirm Password：< / td>
< td class =confirm_password_textbox >
< input type =textname =confirm_passwordmaxlength =25size =25style =height：28px; font-size：14pt;>
< ; / td>
< / table>
< / body>
< / html> $ b $ 您可以尝试使用属性 clear
添加一个元素 strong>设置为两者是您的容器中具有位置 固定的最后一个元素，例如： < div class ='fixedDiv'>
< p>部分元素...< / p>
< ; p>另一个...< / p>
< a>以及指向某处的链接...< / a>
< br class ='clear'>
< / div>
css如下：
.fixedDiv
{
position：fixed;
}
.clear
{
clear：both;
}
如果你需要一个div， / strong>设置为相对，则可以向 fixedDiv 添加另一个div作为子元素。例如：
< div class ='fixedDiv'>
< div class ='relativeDiv'>
< p>这里有一些元素...< / p>
< p>另一个...< / p>
< a>和到某处的链接...< / a>
< br class ='clear'>
< / div>
< / div>
而css如下所示：
.relativeDiv
{
position：relative;
width：100％; //从fixedDiv中消耗整个空间
height：100％;
}
I have a webpage built with html and css on which content is being clipped at the bottom of the page. I would like to add scrolling to the page but am unable to do so. I have tried the traditional html{ overflow: scroll;} or html { overflow: auto;} and neither seems to work. I am working with google chrome and have tried it on safari also but the scroll bar never seems to appear. I would like to know what I am missing and would really appreciate any help with making the webpage scroll.
And I am using position: fixed and am not using position: relative, I read somewhere that might make a difference but am hoping against hope that it won't coz I am going to have to change many things if I make that change. Please do let me know whether there is a way to make the webpage scroll with fixed positioning or whether that is the problem.
Any help would be much appreciated.
I have posted my code below, I apologize for the very messy code in advance, I am very new to web development:
<!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>
解决方案
You can try adding an element with property clear set to both to be the last element in your container that has position fixed. For example:
<div class='fixedDiv'>
<p> Some element here...</p>
<p> Another one... </p>
<a> And a link to somewhere...</a>
<br class='clear'>
</div>
And the css would look like:
.fixedDiv
{
position: fixed;
}
.clear
{
clear: both;
}
If you need to have a div that has to have position set to relative, you can add another div as a child element to fixedDiv. For example:
<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>
And the css would look like:
.relativeDiv
{
position: relative;
width: 100%; // to consume the whole space from fixedDiv
height: 100%;
}
这篇关于如何添加滚动条到网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
