Question

我正在尝试在两个固定的DIV（页眉和页脚）之间滚动内容。可滚动区域有一个固定的（子）标题和可变文本，这是我需要滚动的内容。我有一些方法，但现在卡住了。 HTML看起来像这样：

<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（内容包装器），以便txt在选项卡行下面开始。我看到的主要问题是当页面缩小到标签行折叠的点时，折叠的标签会遮挡文本的初始行。

使用Firebug我可以看到DIV似乎是从屏幕顶部（视口？）锚定的，而我原本预计它会在前面的DIV（tabline）之下开始。这就是我在http://www.w3schools.com找到位置时所读到的内容。

有人可以解释我的错误以及如何纠正它吗？

您可以通过此网址查看相关网页： hpg-nidderdale.co.uk/template.shtml

Answer 1

我认为这里的相对定位有问题。制作内部容器＆＃34;根据需要，相对于身体的流量和位置。

用于身体

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

和其他元素

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

Answer 2

如何使用

查看使用响应式设计

@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; } }

在2个固定的DIV之间滚动一个div，位置：对我不起作用

2 个答案: