Làm cách nào để thêm thanh cuộn vào trang web?

Tôi có trang web được tạo bằng html và css trên đó nội dung đang được cắt bớt ở cuối trang. Tôi muốn thêm cuộn vào trang nhưng không thể làm như vậy. Tôi đã thử html truyền thống {overflow: scroll;} hoặc html {overflow: auto;} và dường như không hoạt động. Tôi đang làm việc với google chrome và đã thử nó trên safari cũng nhưng thanh cuộn dường như không bao giờ xuất hiện. Tôi muốn biết những gì tôi đang mất tích và sẽ thực sự đánh giá cao bất kỳ sự trợ giúp nào khi thực hiện cuộn trang web.Làm cách nào để thêm thanh cuộn vào trang web?

Và tôi đang sử dụng vị trí: cố định và không sử dụng vị trí: tương đối, tôi đọc ở đâu đó có thể tạo sự khác biệt nhưng tôi hy vọng sẽ không thay đổi nhiều thứ nếu tôi thực hiện thay đổi đó. Vui lòng cho tôi biết liệu có cách nào để làm cho trang web cuộn với vị trí cố định hay không hay đó là vấn đề.

Mọi trợ giúp sẽ được đánh giá cao.

Tôi đã đăng tải mã của tôi dưới đây, tôi xin lỗi vì sự mã rất lộn xộn trước, tôi rất mới để phát triển 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>

Nguồn

2012-10-27 anonuser0428

bạn có thể chia sẻ mã của mình không? – Anoop

Cố định có lẽ là vấn đề của bạn, sẽ vị trí: tuyệt đối không giúp bạn? mà không thấy mã hoặc một liên kết khó mà nói. – Modika

Vị trí cố định là vấn đề của bạn. –

Bạn có thể thử thêm một phần tử với tài sản rõ ràng thiết lập để cả hai là phần tử cuối cùng trong vùng chứa của bạn có vị trícố định. Ví dụ:

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

Và css sẽ trông như thế:

.fixedDiv 
    { 
     position: fixed; 
    } 

    .clear 
    { 
     clear: both; 
    }

Nếu bạn cần phải có một div mà đã có vị trí thiết lập để tương, bạn có thể thêm một div như phần tử con thành fixedDiv. Ví dụ:

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

Và css sẽ trông như thế:

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

Nguồn

2012-10-27 18:28:18

Position: fixed nơi các yếu tố trong câu hỏi liên quan đến các cửa sổ trình duyệt. Tôi không nghĩ bạn muốn sử dụng nó.

Thay vào đó, hãy sử dụng position: absolute, điều này sẽ cho phép bạn trong trường hợp này đặt các phần tử liên quan đến phần tử html.

Nguồn

2014-11-13 02:15:47 Brendonwbrown

Làm cách nào để thêm thanh cuộn vào trang web?

Trả lời

Các vấn đề liên quan