css - 动态网页上的Html5无限滚动

Question

我正在尝试实现一个无限滚动页面，当我添加一个元素时尺寸会发生变化，这里有一张图片来解释我的意思。

有很多 css，所以如果需要我也可以添加它们。

谢谢

Answer 1

你要做的是:

1. 给你的页眉和页脚一个 fixed position以及定义的高度。

2. 给出你的主体auto overflow以及等于页眉和页脚高度的填充。

也许这个example会给你方向。您可以创建类似于以下内容的页面布局:

<header id="header-container">
    <div id="site-header">
        Site Header
    </div>
    <div id="main-header">
        Main Header
    </div>
</header>
<footer id="footer-container">
    <div id="main-footer">
        Main Footer
    </div>
    <div id="site-footer">
        Site Footer
    </div>
</footer>
<main id="main-body">
    Main Body
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</main>

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#header-container {
    position: fixed;
    top: 0;
    width: 100%;
    height: 150px; /* 100px for site header, 50px for main header. */
}

#site-header {
    background-color: #eee;
    height: 100px;
}

#main-header {
    background-color: #cce;
    height: 50px;
}

#footer-container {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 75px; /* 50px for site footer, 25px for main footer. */
}

#site-footer {
    background-color: #eee;
    height: 50px;
}

#main-footer {
    background-color: #cce;
    height: 25px;
}

#main-body {
    margin: 150px 0 75px; /* 50px on top, 50px on bottom*/
    overflow: auto;
}