简单容易实现的固定底部

最新推荐文章于 2024-08-03 00:35:09 发布

渣渣玲

最新推荐文章于 2024-08-03 00:35:09 发布

阅读量281

点赞数

分类专栏：小总结文章标签： css html 固定底部

本文链接：https://blog.csdn.net/weixin_41529228/article/details/84306363

版权

小总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简单容易实现的固定底部

不固定页面长度，怎么实现footer 粘住底部呢？

方法一

内容div（全局的元素）：：包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度
多一个空白元素(防止内容覆盖到底部的元素。这个push元素是智能的，它并没有占用到底部的利用，而是通过全局加了一个负边距来填充。) 高度等于底部高度
例子如下:
html:

<body>
  <div class="wrapper">
  <div class="push">  </div>
  </div>
  <footer class="footer"></footer>
</body>

css:

*{
margin:0 auto;
}
html, body {
  height: 100%;
  margin: 0;
  width: 100%;
}
.wrapper {
  min-height: 100%;
width: 100%;
 margin-bottom: -50px; 
}
.push{
	height: 50px;
}
.footer
 {
  height: 50px;
  background-color: red;
  width: 100%;
}

方法二、利用 margin-top 负值 footer margin-top:-自身的高度
例子如下:
html:

<body>
  <div class="wrapper">
  <div class="content">
  
  </div>
    
  </div>
  <footer class="footer"></footer>
</body>

css:

*{
margin:0 auto;
}
html, body {
  height: 100%;
  margin: 0;
  width: 100%;
}
.wrapper {
  min-height: 100%;
  width: 100%;
 
}
.content
{
   padding-bottom: 50px;
}

.footer
{
  height: 50px;
  background-color: red;
  margin-top: -50px;
}

渣渣玲

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单容易实现的固定底部

简单容易实现的固定底部不固定页面长度，怎么实现footer 粘住底部呢？方法一内容div（全局的元素）：：包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度多一个空白元素(防止内容覆盖到底部的元素。这个push元素是智能的，它并没有占用到底部的利用，而是通过全局加了一个负边距来填充。) 高度等于底部高度例子如下:html:&lt;body&gt; &lt;div ...
复制链接

扫一扫