網頁將不會滾動到屏幕外元素

我正在一個網頁上工作，我希望有多個固定元素與中心元素滾動顯示最重要的信息。但是，當物體在屏幕下方時，我的頁面不會啓用滾動條，並且強制滾動條出現將簡單地在兩側留下不活動的滾動條。我試過使用html {overflow: auto;}和其他變化無濟於事。網頁將不會滾動到屏幕外元素

以下是我迄今爲止的代碼。我希望底部的圖像和歡迎圖像在標題後面向上滾動，而側面圖像保持原樣。

<!DOCTYPE html>

<!-->Information for the Div's used.</--> 
<style> 
    .header {position: fixed; top: 5px; right: 6px; height: 120px; width: 100%; background-color: white;} 
    .Title {position: fixed; background-color: white; width: 432px; height: 55px; top: 5px; left: 318px;} 
    .machine {position: fixed; background-color: white; width: 119px; height: 71px; top: 8px; left: 241px;} 
    .bars {position: fixed; background-color: white; width: 981px; height: 56px; top: 90px; left: 9px;} 
    .nav {position: fixed; background-color: white; width: 204px; height: 80px; top: 1px; left: 22px;} 
    .lborder {position: fixed; background-color: white; width: 193px; height: 518px; top: 145px; left: 16px; } 
    .rborder {position: fixed; background-color: white; width: 193px; height: 518px; top: 140px; left: 827px; } 
    .welcome {position: absolute; background-color: white; width: 211px; height: 50px; top: 150px; left: 387px; } 
    .whitespace {position: absolute; background-color: grey; width: 211px; height: 200px; top: 584px; left: 301px; } 
</style> 

<!-->Information for font styles. </--> 
<style type="text/css"> 
    .textstyle0 {font-family:Arial;font-weight:normal;font-style:normal;font-size:8pt;text-decoration:none;color:#0000a0;} 

</style>

<!-->This contains all of the objects that will remain static in all pages. 
    They will not move when you scroll the page, and are carried over through the whole site. </--> 
<div class="header"> 
    <div class="Title"><img src="files/IMG_5.jpg"</div> 
    <div class="machine"><img src="files/IMG_0-test.jpg" /></div> 
    <div class="bars"><img src="files/IMG_25.jpg" /></div> 
    <div class="nav"> 
     <table width="100%"> 
      <tr> 
       <td class="auto-style2"><span class="textstyle0"><a href="page1.html">About Us</a></span></td> 
       <td class="auto-style2"><span class="textstyle0"><a href="Directions.html">Directions</a></span></td> 
       <td class="auto-style2"><span class="textstyle0"><a href="default.htm">Home Page</a></span></td> 
      </tr> 
      <tr> 
       <td class="auto-style3"><span class="textstyle0"><a href="Contacts.html">Contacts</a></span></td> 
       <td class="auto-style3"><span class="textstyle0"><a href="Customers.html">Customers</a></span></td> 
       <td class="auto-style3"><span class="textstyle0"><a href=""></a></span></td> 
      </tr> 
      <tr> 
       <td><span class="textstyle0"><a href="Products.html">Products</a></span></td> 
       <td><span class="textstyle0"><a href="Links.html">Links</a></span></td> 
       <td><span class="textstyle0"><a href=""></a></span></td> 
      </tr> 
      <tr> 
       <td><span class="textstyle0"><a href="Facilities.html">Facilities</a></span></td> 
       <td><span class="textstyle0"><a href="Contact Form.html">Contact Us</a></span></td> 
       <td><span class="textstyle0"><a href=""></a></span></td> 
      </tr> 
     </table></div> 
    <div class="lborder"><img src="files/IMG_1.jpg" /></div> 
    <div class="rborder"><img src="files/IMG_3.jpg" /></div> 
</div> 

<!-- Scrollable elements --> 
<div class="welcome"><img src="files/IMG_7.jpg" /></div> 
<div class="whitespace"><img src="files/IMG_34.jpg" /></div>

來源

2013-08-28 Josh Kahley

你爲什麼要使用表？你有沒有考慮過使用外部的CSS文件？ – quoo

我只是將表格用於單個導航窗口。儘管我對CSS不太熟悉，所以我可能會看到在那裏會更好。 –

我想的jsfiddle或其他代碼示例將在這裏幫助，但你有幾個容易被發現問題 -

一）IMG_5你的第一個圖像標籤無法正常關閉，這可能導致不一致的行爲

B）你過度使用絕對和固定定位。我會嘗試刪除所有樣式，並將它們僅添加到必要的位置以獲得所需的結果。

如果你不喜歡自己實現CSS佈局，我會建議看看Twitter Bootstrap或Zurb Foundation之類的東西。

我也讀到這篇文章列出，因爲我認爲這將是問題的一個更好的解決方案，它看起來像你想用表來解決：http://alistapart.com/article/taminglists/

來源

2013-08-28 16:01:37 quoo

a）d'oh，這解決了滾動條沒有出現的問題，所以出現了直接的問題，謝謝。 b）我不太確定我是否遵循，除非不想使用定位變量來處理我不想固定的項目？我會仔細研究這些鏈接，並在閱讀完後回顧一下，特別是最後一個看起來非常有趣。感謝您的幫助。 –

網頁將不會滾動到屏幕外元素

回答

相關問題