如何在HTML中使页脚固定在网页底部?


页脚顾名思义,始终固定在网页底部。例如,在以下页面中,我们有一个固定在底部的页脚,即即使页面向上滚动,页脚仍然存在:

要创建一个固定在底部且固定的页脚,我们将使用CSS。

使用position属性设置页脚停留在网页底部

使用position CSS属性设置页脚停留在网页底部。页脚的高度、背景颜色和文本颜色设置为:

height: 40px;
background: black;
color: white; 

示例

让我们看看完整的示例:

Open Compiler
<html> <head> <style> #footer { position: fixed; padding: 10px 10px 0px 10px; bottom: 0; width: 100%; height: 40px; background: black; color: white; } </style> <head> <body> <center> <div id="container"> <h2>Demo Heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ipsum mi, pretium finibus varius in, efficitur sit amet purus. Nam neque felis, efficitur vel eleifend at, posuere sed lectus. Donec laoreet tristique tortor eget varius. Vestibulum rutrum lectus dolor, id rhoncus mauris tempor vitae. Vivamus elementum dapibus ultrices. Maecenas facilisis sem nec quam fringilla, eu venenatis leo vehicula.</p> <p>Donec maximus urna nunc, vel scelerisque arcu tincidunt ultricies. Vestibulum tristique fermentum eros, a suscipit massa euismod quis. Praesent magna libero, feugiat quis magna at, bibendum faucibus mauris. Fusce at hendrerit nunc, non iaculis nisl. Integer facilisis tempor nibh eu faucibus. Ut cursus hendrerit justo, sit amet eleifend enim accumsan et. Ut lobortis massa quis leo dapibus cursus.</p> <p>Suspendisse efficitur condimentum dolor. Quisque sit amet dictum urna. Aliquam est nunc, ornare et vestibulum quis, volutpat a magna. Proin consequat lectus a tellus finibus, quis venenatis felis varius. Sed maximus, dui a accumsan imperdiet, nibh mauris facilisis metus, sed iaculis leo tellus nec augue. Maecenas ornare feugiat nunc fermentum porttitor. Sed fermentum eros at lorem venenatis, sed tempus sem varius. Maecenas lobortis enim sed pretium ultricies. Aliquam et dui suscipit, suscipit tortor id, consectetur odio. Vestibulum vel eros quis ante scelerisque suscipit imperdiet a dolor. Vivamus faucibus vitae lacus id interdum. Vivamus blandit, odio sed scelerisque gravida, nibh eros malesuada nunc, non lacinia elit risus non augue. Ut luctus tempor aliquam.</p> <div id="footer">Footer</div> </div> </center> </body> <html>

使用display属性设置页脚停留在网页底部

在这个例子中,我们将使用display属性设置页脚停留在网页底部。设置页脚的样式:

display: table-row; 

示例

让我们看看完整的示例:

Open Compiler
<html> <head> <style> html, body { height: 100%; width: 100%; margin: 0; display: table; } footer { background-color: black; color: white; display: table-row; height: 0; } </style> <head> <body> <center> <div id="container"> <h2>Demo Heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ipsum mi, pretium finibus varius in, efficitur sit amet purus. Nam neque felis, efficitur vel eleifend at, posuere sed lectus. Donec laoreet tristique tortor eget varius. Vestibulum rutrum lectus dolor, id rhoncus mauris tempor vitae. Vivamus elementum dapibus ultrices. Maecenas facilisis sem nec quam fringilla, eu venenatis leo vehicula.</p> <p>Donec maximus urna nunc, vel scelerisque arcu tincidunt ultricies. Vestibulum tristique fermentum eros, a suscipit massa euismod quis. Praesent magna libero, feugiat quis magna at, bibendum faucibus mauris. Fusce at hendrerit nunc, non iaculis nisl. Integer facilisis tempor nibh eu faucibus. Ut cursus hendrerit justo, sit amet eleifend enim accumsan et. Ut lobortis massa quis leo dapibus cursus.</p> <p>Suspendisse efficitur condimentum dolor. Quisque sit amet dictum urna. Aliquam est nunc, ornare et vestibulum quis, volutpat a magna. Proin consequat lectus a tellus finibus, quis venenatis felis varius. Sed maximus, dui a accumsan imperdiet, nibh mauris facilisis metus, sed iaculis leo tellus nec augue. Maecenas ornare feugiat nunc fermentum porttitor. Sed fermentum eros at lorem venenatis, sed tempus sem varius. Maecenas lobortis enim sed pretium ultricies. Aliquam et dui suscipit, suscipit tortor id, consectetur odio. Vestibulum vel eros quis ante scelerisque suscipit imperdiet a dolor. Vivamus faucibus vitae lacus id interdum. Vivamus blandit, odio sed scelerisque gravida, nibh eros malesuada nunc, non lacinia elit risus non augue. Ut luctus tempor aliquam.</p> <p>Sed maximus, dui a accumsan imperdiet, nibh mauris facilisis metus, sed iaculis leo tellus nec augue. Maecenas ornare feugiat nunc fermentum porttitor. Sed fermentum eros at lorem venenatis, sed tempus sem varius. Maecenas lobortis enim sed pretium ultricies. Aliquam et dui suscipit, suscipit tortor id, consectetur odio. </p> <footer> FOOTER<br /> This is the Footer... Sed maximus, dui a accumsan imperdiet, nibh mauris facilisis metus, sed iaculis leo tellus nec augue </footer> </center> </body> <html>

更新于:2022年10月18日

435 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告