将一个div固定在页脚

Posted LangZ-

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将一个div固定在页脚相关的知识，希望对你有一定的参考价值。

<body>  
<form> <!-- 如果用的是 Asp.Net 就可能会有这个结点 -->  
  <div class="Wrapper">  
    <div class="Header"></div>  
    <div class="Content"></div>  
    <div class="FooterPush"></div>  
  </div>  
  <div class="Footer"></div>  
</form>  
</body>  
*  
{  
  margin: 0;  
  padding: 0;  
}  
     
html, body, form  
{  
  height: 100%;  
}  
     
.Wrapper  
{  
  min-height: 100%;  
}  
     
  .Wrapper .FooterPush  
  {  
    height: 120px; /* Footer 的高度 */  
  }  
     
.Footer  
{  
  clear: both; /* 清除浮动元素格式 */  
  position: relative;  
  margin-top: -120px; /* Footer 高度的负值 */  
  height: 120px;  
}

 

以上是关于将一个div固定在页脚的主要内容，如果未能解决你的问题，请参考以下文章

在页脚上重叠的滚动固定侧边栏

如何让社交媒体图标在页脚中对齐？

获得位置：固定侧边栏停在页脚（并将 JS 添加到 Wordpress）

在页脚有 2 个按钮。右侧按钮离开页面jQuery移动

Wordpress - 将代码片段包含到布局的选定部分的插件

如何在页面底部但在（未固定）页脚上方制作固定的“转到顶部”按钮？