我有一些没有太多内容的网页,页脚位于页面的中间,但我希望它在底部.

我把所有的书页都放在一个"书架"里了.

#holder {
  min-height: 100%;
  position:relative;
}

然后我的页脚使用了下面的CSS

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}

我的页脚的html

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:exampleemail@gmail.com</li>
        </ul>
      </div>
    </div>
  </div>
</div>

我想保持页脚流畅.

推荐答案

正如在注释中所讨论的,您的代码基于此解决方案:https://stackoverflow.com/a/8825714/681807

此解决方案的关键部分之一是将height: 100%html, body相加,以便#footer元素有一个基本高度可供使用-您的代码中缺少这一点:

html,body{
    height: 100%
}

您还会发现使用bottom: -50px会遇到问题,因为这会在内容不多的情况下将您的内容推入文件夹.您必须将margin-bottom: 50px加到#footer之前的最后一个元素上.

Css相关问答推荐

更改MAT-FORM-FIELD的CSS,使其在有Angular 的HTML中显示为普通文本框

显示Reaction组件上的问题.使用FlexBox时的意外大小

如何在JavaFX中设置分隔符的样式?

使用 Vuetify 的 sass 变量时出错

在 CSS 中跨列对齐文本基线

为什么 :focus 会覆盖 :focus-visible ?

flex-wrap 导致 children 身高加倍

在 dbc.Container 上方包含横幅 - Dash

网格在行方向上的大小不正确

如何禁用亚像素渲染或强制浏览器将属性舍入到最近的像素?

带填充的水平边框

如何在 Angular 中使用 CSS 设置 FontAwesome 图标的大小?

使用 MUI 动态绘制多个边框

如何制作一个div来包装两个浮动div?

弹性盒项目之间的间距

如何让 Firefox 在文件更改时自动刷新?

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

空的 iframe src 是否有效?

bootstrap 程序中有 7 个相等的列

HTML5 和边框