代码揭秘：让网页 footer 的 div 稳稳吸附在底部

以下是一个简单的HTML和CSS代码，可以实现网页footer的div一直吸附在底部： HTML代码： ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="content">  </div> <footer class="footer">  </footer> </body> </html> ``` CSS代码（styles.css）： ```css body { margin: 0; padding: 0; height: 100vh; /* 全屏高度 */ } .content { /* 内容区域的样式 */ } .footer { position: fixed; /* 定位为固定位置 */ bottom: 0; /* 位于底部 */ width: 100%; /* 占据整个容器宽度 */ padding: 10px; /* 底部内边距 */ background-color: #333; /* 颜色 */ color: #fff; /* 文字颜色 */ } ``` 在这个示例中，我们将footer的定位属性设置为fixed，使其始终保持在页面底部。我们设置了bottom: 0属性，以确保footer始终位于底部。我们还为footer添加了一些内边距和颜色，以使其更加美观。我们将body的高度设置为100vh，以确保整个页面填充整个屏幕高度。这只是一个简单的示例，您可以根据自己的需求进行修改和调整。 ######[AI写代码神器 | 363点数解答 | 2023-11-13 18:23:23]

服务商

更多选项

快捷项

自定义