1

我正在开发一个网页，我希望有多个固定元素，其中中心元素滚动以显示最重要的信息。但是，当对象位于屏幕下方时，我的页面将不会启用滚动条，并且强制显示滚动条只会在侧面留下不活动的滚动条。我试过使用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>

4

1 回答 1

0

我认为 jsfiddle 或其他代码示例在这里会有所帮助，但您有一些容易发现的问题 -

a) 您的 IMG_5 的第一个图像标签未正确关闭，这可能导致不一致的行为

b）您过度使用绝对定位和固定定位。我会尝试删除您所有的样式，并仅在绝对必要的情况下将它们添加回来以获得您需要的结果。

如果你不习惯自己实现 CSS 布局，我建议你看看Twitter Bootstrap或Zurb Foundation 之类的东西。

我还阅读了有关列表的这篇文章，因为我认为这将是一个更好的解决方案，它看起来像是您试图用表格解决的问题：http: //alistapart.com/article/taminglists/

于 2013-08-28T16:01:37.477 回答