如何使用绝对位置将页脚固定在底部？

这是我要尝试的设计。

因此，我决定提出三部分。

1. top_bg
2. 内容
3. footer_bg

我已将绝对位置bg固定在顶部和底部。但问题是，即使我给了底数0，footer_bg图像也不位于底部，而是排在顶部。

代码标记

<div id="top_bg">
    <img src="https://images.unsplash.com/photo-1438368915865-a852ef86fc42?q=80&fm=jpg&s=15e4744077e36852ba57f46f4660dc7a" />
</div>

<div id="content">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas semper, massa quis aliquet rhoncus, diam lorem euismod ante, sed vulputate nulla magna id dui. Sed sit amet libero mi. Fusce suscipit, lorem at dignissim rutrum, urna est scelerisque nisl, nec interdum orci tortor at ante. Nam a sollicitudin massa, sit amet pretium nisl. Morbi at velit maximus, commodo ligula vel, pharetra dui. Vivamus mollis mi eget nunc accumsan scelerisque. Fusce non mauris sit amet nibh malesuada faucibus.</p>

<p>Donec feugiat, tortor eget interdum rhoncus, nunc felis dictum mauris, at convallis elit turpis quis sem. Donec enim augue, tempus ac scelerisque euismod, congue sed nisi. Vestibulum sed fermentum nisi, nec lacinia mi. Duis ut consectetur sem. Pellentesque lacinia ipsum eu sapien iaculis, ut varius libero hendrerit. Phasellus non turpis augue. Nam ut felis dapibus, viverra arcu et, tincidunt neque. In at convallis tellus. Nunc sit amet eleifend mauris. Sed diam elit, placerat a laoreet eu, facilisis gravida erat. Praesent eget ultricies nisl. Quisque vehicula cursus aliquet. Curabitur at diam volutpat, tempor ante eu, cursus dolor. Integer laoreet, est sed lacinia ultricies, quam massa cursus est, vitae pulvinar nibh lectus sed elit.</p>

<p>Aenean cursus porttitor eleifend. Morbi ultrices eleifend eros, ac posuere tellus lobortis vestibulum. Aenean eu dolor nec elit ultrices cursus at sed magna. Donec quis porta nulla, in dictum arcu. Pellentesque porttitor dui vitae euismod consectetur. Pellentesque id tellus viverra, vulputate nisi sit amet, ultricies nibh. In hac habitasse platea dictumst. Praesent pharetra ex a dictum consectetur. Fusce finibus sapien vel iaculis mollis. Nunc vel luctus enim.</p>

<p>Aliquam lacinia vestibulum tempor. Etiam pellentesque, felis nec commodo cursus, sem mi feugiat dolor, sed dignissim ipsum lectus vel risus. Cras a dui eget lacus mattis volutpat in sed tortor. Aliquam lobortis sapien sit amet pharetra varius. Donec eget aliquam nisi. Morbi quis mattis quam. Nullam porta suscipit dignissim. In hac habitasse platea dictumst. Praesent in dui id dui porta lacinia. Nam odio tortor, volutpat non auctor id, placerat nec augue. Suspendisse quis pretium ligula, quis accumsan tortor. Cras eu est vitae orci egestas rhoncus eu non dolor. Integer vehicula suscipit magna ut varius. Maecenas sagittis leo id nisl sagittis viverra.</p>

<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sed consectetur neque, a pellentesque turpis. Sed quis orci diam. Aenean vel ultricies ipsum, id accumsan mi. Sed hendrerit sollicitudin nisi bibendum hendrerit. Duis nec hendrerit ipsum. Suspendisse congue mauris ut viverra dapibus. Fusce ut blandit nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus sapien et felis dictum aliquet. Pellentesque a pretium leo. Duis rhoncus bibendum fermentum. Proin ac massa euismod, pretium odio vel, vehicula risus. Aenean posuere eros non orci maximus, tristique varius felis elementum. Etiam eget maximus massa, in facilisis ipsum. Integer eleifend auctor diam scelerisque tempor.</p>


    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas semper, massa quis aliquet rhoncus, diam lorem euismod ante, sed vulputate nulla magna id dui. Sed sit amet libero mi. Fusce suscipit, lorem at dignissim rutrum, urna est scelerisque nisl, nec interdum orci tortor at ante. Nam a sollicitudin massa, sit amet pretium nisl. Morbi at velit maximus, commodo ligula vel, pharetra dui. Vivamus mollis mi eget nunc accumsan scelerisque. Fusce non mauris sit amet nibh malesuada faucibus.</p>

<p>Donec feugiat, tortor eget interdum rhoncus, nunc felis dictum mauris, at convallis elit turpis quis sem. Donec enim augue, tempus ac scelerisque euismod, congue sed nisi. Vestibulum sed fermentum nisi, nec lacinia mi. Duis ut consectetur sem. Pellentesque lacinia ipsum eu sapien iaculis, ut varius libero hendrerit. Phasellus non turpis augue. Nam ut felis dapibus, viverra arcu et, tincidunt neque. In at convallis tellus. Nunc sit amet eleifend mauris. Sed diam elit, placerat a laoreet eu, facilisis gravida erat. Praesent eget ultricies nisl. Quisque vehicula cursus aliquet. Curabitur at diam volutpat, tempor ante eu, cursus dolor. Integer laoreet, est sed lacinia ultricies, quam massa cursus est, vitae pulvinar nibh lectus sed elit.</p>

<p>Aenean cursus porttitor eleifend. Morbi ultrices eleifend eros, ac posuere tellus lobortis vestibulum. Aenean eu dolor nec elit ultrices cursus at sed magna. Donec quis porta nulla, in dictum arcu. Pellentesque porttitor dui vitae euismod consectetur. Pellentesque id tellus viverra, vulputate nisi sit amet, ultricies nibh. In hac habitasse platea dictumst. Praesent pharetra ex a dictum consectetur. Fusce finibus sapien vel iaculis mollis. Nunc vel luctus enim.</p>

<p>Aliquam lacinia vestibulum tempor. Etiam pellentesque, felis nec commodo cursus, sem mi feugiat dolor, sed dignissim ipsum lectus vel risus. Cras a dui eget lacus mattis volutpat in sed tortor. Aliquam lobortis sapien sit amet pharetra varius. Donec eget aliquam nisi. Morbi quis mattis quam. Nullam porta suscipit dignissim. In hac habitasse platea dictumst. Praesent in dui id dui porta lacinia. Nam odio tortor, volutpat non auctor id, placerat nec augue. Suspendisse quis pretium ligula, quis accumsan tortor. Cras eu est vitae orci egestas rhoncus eu non dolor. Integer vehicula suscipit magna ut varius. Maecenas sagittis leo id nisl sagittis viverra.</p>


</div>

<div id="footer_bg">
    <img src="https://images.unsplash.com/photo-1438480478735-3234e63615bb?q=80&fm=jpg&s=8fddc1c4c240e145cf6b65a21ae92087">
</div>

风格

#top_bg,#footer_bg{
    position:absolute;
    z-index:-99999;
}
#top_bg,#footer_bg img{
    width:100%;
}
#top_bg{
    top:0;
}
#footer_bg{
    bottom:0;
}

#content{
    background-color:white;
    margin:40px;
    margin-top:100px;
    padding:10px;
}

JSFIDDLE

为什么会这样呢？这里没有使用浮点数。问题是什么？

我的footer_bg父母是body，我给了底数0，因此它应该适合页面的底部。我不知道为什么它没有发生。

页面底部如何显示footer_bg图片？