Question

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

Answer 1

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

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

b）你过度使用绝对和固定的定位。我会尝试删除你所有的风格，然后只在绝对必要的地方添加它们以获得你需要的结果。

如果您不熟悉自己实施CSS布局，我建议您查看Twitter Bootstrap或Zurb Foundation之类的内容。

我还会在列表中阅读这篇文章，因为我认为这对于您尝试使用表格解决的问题是一个更好的解决方案：http://alistapart.com/article/taminglists/

网页不会滚动到屏幕外元素

1 个答案: