वेबपेज पर स्क्रॉल बार कैसे जोड़ें?

मेरे पास एचटीएमएल और सीएसएस के साथ बनाया गया एक वेबपृष्ठ है जिस पर पेज के निचले हिस्से में सामग्री को फिसल दिया जा रहा है। मैं पृष्ठ पर स्क्रॉलिंग जोड़ना चाहता हूं लेकिन ऐसा करने में असमर्थ हूं। मैंने पारंपरिक एचटीएमएल {ओवरफ्लो: स्क्रॉल;} या एचटीएमएल {ओवरफ्लो: ऑटो;} की कोशिश की है और न ही काम करता है। मैं Google क्रोम के साथ काम कर रहा हूं और इसे सफारी पर भी कोशिश की है लेकिन स्क्रॉल बार कभी दिखाई नहीं दे रहा है। मैं जानना चाहता हूं कि मैं क्या खो रहा हूं और वेबपृष्ठ स्क्रॉल करने में किसी भी मदद की सराहना करता हूं।वेबपेज पर स्क्रॉल बार कैसे जोड़ें?

और मैं स्थिति का उपयोग कर रहा हूं: निश्चित और स्थिति का उपयोग नहीं कर रहा हूं: रिश्तेदार, मैंने कहीं पढ़ा है जो एक फर्क पड़ सकता है लेकिन उम्मीद के मुकाबले उम्मीद कर रहा हूं कि यह नहीं होगा कि अगर मैं करूँ तो मुझे कई चीजें बदलनी पड़ेगी वह परिवर्तन कृपया मुझे बताएं कि क्या वेबपृष्ठ स्क्रॉल को निश्चित स्थिति के साथ स्क्रॉल करने का कोई तरीका है या फिर यह समस्या है या नहीं।

किसी भी मदद की बहुत सराहना की जाएगी।

मैं पोस्ट किया है नीचे मेरी कोड है, मैं पहले से बहुत गन्दा कोड के लिए हमें खेद है, मैं वेब विकास के लिए बहुत नया हूँ:

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

स्रोत

2012-10-27 anonuser0428

क्या आप अपना कोड साझा कर सकते हैं? – Anoop

फिक्स्ड शायद आपकी समस्या है, स्थिति होगी: पूर्ण आपकी मदद नहीं करेगा? बिना कोड या लिंक को कड़ी मेहनत के बिना। – Modika

स्थिति तय आपकी समस्या है। –

आप संपत्ति स्पष्ट सेट के साथ कोई तत्व जोड़ कोशिश कर सकते हैं दोनों आपके कंटेनर में अंतिम तत्व होने के लिए स्थितिनिश्चित है। उदाहरण के लिए:

.fixedDiv 
    { 
     position: fixed; 
    } 

    .clear 
    { 
     clear: both; 
    }

आप एक div स्थिति है नहीं है की आवश्यकता है सेट रिश्तेदार के लिए, आप के रूप में एक और div जोड़ सकते हैं:

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

और सीएसएस कैसा लगेगा फिक्स्डडिव पर एक बच्चा तत्व। उदाहरण के लिए:

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

स्रोत

2012-10-27 18:28:18

Position: fixed स्थानों ब्राउज़र विंडो के सवाल सापेक्ष में तत्वों:

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

और सीएसएस कैसा दिखेगा। मुझे नहीं लगता कि आप इसका इस्तेमाल करना चाहते हैं।

इसके बजाय, position: absolute का उपयोग करें, जो आपको इस मामले में HTML तत्व से संबंधित तत्वों को रखने की अनुमति देगा।

स्रोत

2014-11-13 02:15:47 Brendonwbrown

वेबपेज पर स्क्रॉल बार कैसे जोड़ें?

उत्तर

संबंधित मुद्दे