源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 6629|回复: 0
打印 上一主题 下一主题

[CSS/Html] 前端代码小技巧,CSS粘住固定底部的2种方法

[复制链接]

1175

主题

1564

帖子

9020

金币

超级版主

Rank: 8Rank: 8

积分
19728
跳转到指定楼层
1#
发表于 2022-5-4 22:06:06 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部。我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器的底部时,下面要讲的布局就是解决如何使元素粘住浏览器底部。下面是效果图:



方法一:全局增加一个负值下边距等于底部高度

有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度,就像这个演示链接。 HTML代码

  1. <body>
  2.   <div class="wrapper">

  3.       content

  4.     <div class="push"></div>
  5.   </div>
  6.   <footer class="footer"></footer>
  7. </body>
复制代码


CSS代码:

  1. html, body {
  2.   height: 100%;
  3.   margin: 0;
  4. }
  5. .wrapper {
  6.   min-height: 100%;

  7.   /* Equal to height of footer */
  8.   /* But also accounting for potential margin-bottom of last child */
  9.   margin-bottom: -50px;
  10. }
  11. .footer,
  12. .push {
  13.   height: 50px;
  14. }
复制代码


这个代码需要一个额外的元素.push等于底部的高度,来防止内容覆盖到底部的元素。这个push元素是智能的,它并没有占用到底部的利用,而是通过全局加了一个负边距来填充。

方法二:底部元素增加负值上边距

虽然这个代码减少了一个.push的元素,但还是需要增加多一层的元素包裹内容,并给他一个内边距使其等于底部的高度,防止内容覆盖到底部的内容。 HTML代码:

  1. <body>
  2.   <div class="content">
  3.     <div class="content-inside">
  4.       content
  5.     </div>
  6.   </div>
  7.   <footer class="footer"></footer>
  8. </body>
复制代码


css:

  1. html, body {
  2.   height: 100%;
  3.   margin: 0;
  4. }
  5. .content {
  6.   min-height: 100%;
  7. }
  8. .content-inside {
  9.   padding: 20px;
  10.   padding-bottom: 50px;
  11. }
  12. .footer {
  13.   height: 50px;
  14.   margin-top: -50px;
  15. }
复制代码




分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-11-14 14:49 , Processed in 0.152030 second(s), 28 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明