精通css（7）-实例

最新推荐文章于 2025-01-02 14:17:55 发布

机智的大猫猫

最新推荐文章于 2025-01-02 14:17:55 发布

阅读量644

点赞数

CC 4.0 BY-SA版权

分类专栏： Web开发文章标签： css footer固定

本文链接：https://blog.youkuaiyun.com/liquanfeng326/article/details/15029445

Web开发专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种简单的方法来实现网页底部的固定元素（如版权信息）始终位于页面底部，不受滚动条影响。通过使用HTML布局技巧和CSS样式，可以确保即使页面内容滚动，该元素始终保持可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.让footerr固定在底部

来源于http://ryanfait.com/resources/footer-stick-to-bottom-of-page/一种很简单的方法：

<body>
<div class="wrapper">
    <p>Your website content here.</p>
    <div class="push"></div>
</div>
<div class="footer">
    <p>Copyright (c) 2008</p>
</div>
</body>

<style>
  * {
   margin: 0;
  }
   html, body {
   height: 100%;
  }
   .wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -4em;
  }
   .footer, .push {
   height: 4em;
  }
  .footer{
    background: #400;
  }

</style>