Css 如何将页脚保持在屏幕底部

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow: auto;
  padding-bottom: 180px;
  /* must be same height as the footer */
}

#footer {
  position: relative;
  margin-top: -180px;
  /* negative value of footer height */
  height: 180px;
  clear: both;
  background-color: red;
}


/* Opera Fix thanks to Maleika (Kohoutec) */

body:before {
  content: "";
  height: 100%;
  float: left;
  width: 0;
  margin-top: -32767px;
  /* thank you Erik J - negate effect of float*/
}

<div id="wrap">
  <div id="main"></div>
</div>

<div id="footer"></div>

Css相关问答推荐

如何使重复线性渐变适合字体大小？

带高度的容器查询不工作，但可随宽度调整

仅 Select 嵌套 div 的底部，而不知道它们的嵌套程度

在 CSS 中跨列对齐文本基线

如何取消 CSS 伪类中的属性设置？

Bootstrap 和 Sass：将 SCSS 文件转换为 CSS 时出错.错误：$theme-colors-rgb 中未定义变量 @each $color、$value

React MUI 从 CSS 伪元素中删除内容

如何在Safari中隐藏CSS的offset-path属性？CSS支持规则不按预期工作

Tailwind CSS： Select 单选按钮时不应用同行判断的边框

Tailwind css 和 Next.js 导航组件 z-index 不工作

子组件的css会影响整个页面

基于类的 CSS Select 器

Bootstrap 3 - 在每个网格列之后打印布局和中断

如何将页脚保持在屏幕底部

字体上的 Font-Awesome 错误 404

范围内的 CSS 未在组件中应用

为什么在 CSS3 中启用硬件加速会降低性能？

使用 ：focus 设置外部 div 的样式？

CSS：怎么说 .class：last-of-type [类，不是元素！]

CSS中伪元素前的&是什么意思？