在2個固定DIV之間滾動div，位置：對我不起作用

我試圖在兩個固定DIV（頁眉和頁腳）之間滾動內容。可滾動區域有一個固定的（子）標題和變量文本，這是我需要滾動。我有一些方法，但現在卡住了。的HTML看起來像這樣：在2個固定DIV之間滾動div，位置：對我不起作用

<link rel="stylesheet" type="text/css" href="css/template.css" /> 
<link rel="stylesheet" type="text/css" href="css/button.css" /> 
</head> 
<body> 
<div id="header-wrapper"> 
<div id="header"> 
    <div id="toprightimage"><img src="images/topimage.png" alt="Nutwith Cote" title="Nutwith Cote" /></div> 
    <img id="topbordertext" img="" src="images/HPGtitle.png" alt="Panaramic view" title="HPG Name" /> 
</div><!-- end of id="header" --> 
</div><!-- end of id="header-wrapper" --> 

<div id="content-wrapper"> 
    <div id="tabline"> 
     <a href="#" class="Button">Home</a> 
     <a href="#" class="Button">About Us</a> 
     <a href="#" class="Button">Current Work</a> 
     <a href="#" class="Button">Achievements</a> 
     <a href="#" class="Button">Events</a> 
     <a href="#" class="Button">Publications</a> 
     <a href="#" class="Button">The Project</a> 
     <a href="#" class="Button">Methodology</a> 
     <a href="#" class="Button">Location map</a> 
     <a href="#" class="Button">Contact Us</a> 
     <a href="#" class="Button">Links</a> 
    </div><!-- end of id="tabline" --> 
     <div id="content"> 
      First line of text: (extracted from http://lipsum.com/) 
      <!--#config errmsg="" --> <!--#include virtual="ZZ_BigLoremIpsum.txt" --> 
      Last line of text: 
      </div><!-- end of id="content" --> 

    </div><!-- end of div id="content-wrapper --> 


    <div id="footer-wrapper"> 
     <!--#config errmsg="" --> <!--#include virtual="ZZ_dataserver.footer" --> 
    </div><!-- end of div id="footer-wrapper" --> 

</body>

和CSS是這樣的：

* { 
    margin:0;} 
body { 
    min-width:640px;} 
/* Absolute positioned header for all browsers*/ 
#header-wrapper { 
    position:absolute;top:0;left:0;height:100px;} 
/* Reset header position to fixed for real browsers such as Firefox*/ 
body>#header-wrapper { 
    position:fixed;} 
#header { 
    height:100px;margin:0 auto;width:100%;position:fixed;} 
#content { 
    padding-top:3px;} 
#content-wrapper { 
    padding: 0;padding-top:130px; 
    padding-bottom:30px;position: static;} 
body{ 
    background-color:#66FFFF; 
    background-image:url('/images /gradient3.png'); 
    background-repeat:repeat;margin-left: 5px;} 
#footer-wrapper { 
    position:absolute;bottom:0;left:0; 
    background-color:#CCCCCC;height:30px; 
    border-top-style: solid;border-top-color: black; 
    border-top-width: 2px;width:100%;} 
body>#footer-wrapper { 
    position:fixed;} 
#tabline{ 
    position:fixed;background-color:#F0F8FF; 
    top:100px;width:100%;padding-top:5px; 
    overflow: auto;border-style: solid;border-width: 1px; 
    border-color: #f9f9f9;} 
#toprightimage { 
    position:fixed;} 
#topbordertext { 
    bottom: 0;left: 0;margin: auto;position: absolute;right: 0;top: 0;}

我可以得到可變文本待觀察和滾動的唯一方法是通過填充的DIV（內容-wrapper），以便txt在標籤行下開始。我看到的主要問題是，當頁面縮小到標籤行摺疊的位置時，摺疊的標籤遮蓋了文本的最初行。

使用Firebug我可以看到DIV似乎錨定在屏幕的頂部（視口？），而我本來預計它會從前面的DIV（tabline）開始。這就是我在例如http://www.w3schools.com中查找位置時所閱讀的內容。

有人可以解釋我有什麼問題以及如何糾正它嗎？

您可以通過這個網址瀏覽有關網頁： hpg-nidderdale.co.uk/template.shtml

來源

2016-07-11 disr

如何考慮使用使用響應式設計

@media only screen and (max-width: 768px) { }

或任何寬度導致菜單覆蓋字幕並更改主體padding-top或margin-top以提供適當的像素數量，以便顯示字幕。

滾動瀏覽本教程（http://www.entheosweb.com/website_design/responsive_web_design.asp），你可以看到如何實現它，以及你可以用它做些什麼其他的事情。

編輯：

嘗試添加該到你的CSS表

@media only screen and (max-width: 810px) { 
    #content-wrapper { 
     margin-top: 30px; 
    } 

} 

@media only screen and (max-width: 434px) { 
    #content-wrapper { 
     margin-top: 60px; 
    } 

}

來源

2016-07-11 18:29:50 nviens

有趣的鏈接。我已經看了一下，但按照它的規定，它無法解決我只需滾動內容文本的要求。當我開始考慮使網頁可以跨其他設備訪問時，它確實提供了一個好的開始。 – disr

那麼問題是，在調整屏幕大小或使用比桌面小的屏幕後，您看不到第一行文本，對嗎？ – nviens

我編輯了我的答案給你一個解決方案，讓我知道它是否工作 – nviens

我認爲什麼是錯與相對定位這裏。爲了使內部「容器」能夠根據需要相對於身體流動和定位。

使用對身體

<body style="position:relative;"/>

和其他元素

<div style="position:absolute;"/>

來源

2016-07-11 17:51:56 Lemonade

試過了。它所做的只是丟失製表符和頁腳並滾動整個頁面。 – disr

在2個固定DIV之間滾動div，位置：對我不起作用

回答

相關問題