Question

我试图让页面的页脚包含许多图像（因此需要大量滚动）才会在页面完成滚动后出现。相反，在发生任何滚动之前，页脚出现在页面的底部，因此在页面中间的某个位置结束。

相关HTML：

<body>
    <header>
        <a href="index.html" id="logo"> <h1>
        <div id="header_title">
            Title
        </div></h1> </a>
        <nav>
            <ul>
                <li>
                    <a href="index.html" >About</a>
                </li>
                <li>
                    <a href="resume.html">Resume</a>
                </li>
                <li class="subNav">
                    <a class="selected" >Portfolio</a>
                    <ul>
                        <li>
                            <a href="writing_samples.html">Writing Samples</a>
                        </li>
                        <li>
                            <a href="photoshop.html">Photoshop</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </nav>
    </header>
    <div id="wrapper">
        <section>
            <ul id="gallery">
                <li>
                    ... images would go here, normally there would be many <li> with content inside them; shortened here for simplicity
                </li>   
            </ul>
        </section>
    </div>
    <footer>
            <p>
                &copy; 2016 Name.
            </p>
        </footer>
</body>

和CSS：

    html {
    height: 100%;
    }

    body {
        font-family: 'Playfair Display', open sans;
        position: relative;
        height: 100%; 
    }


    footer {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    font-size: 0.75em;
    text-align: center;
    clear: both; /* cleared from influence of any other floats
     cleared on both left and right sides */
    padding-top: 50px;
    color: #000000;
    width: 100%;
}

Answer 1

删除位置：绝对;来自页脚的CSS

Answer 2

拥有绝对位置，您的页脚位置不依赖于推送它的内容。它仅取决于父级div的位置为“亲属”。在这种情况下，你的身体标签。如果您将页脚的位置设置为“相对”（这是默认设置），则会根据您的需要将其下载到您的内容中。

将页脚保持在页面底部，仅在滚动后显示

2 个答案: