html - CSS - 页脚显示在错误的位置

标签 html css footer

我试图在另一个 div 的底部和内部显示页脚 div,但是当我使用以下代码时,黑色页脚显示在 div 的顶部。

<div class="Background">
<div id="sitefooter">
<style>
#sitefooter {
position: relative;
bottom: 0px;
height: 130px;
background-color: black;
width: 100vw;
}
</style>
</div>
</div>

我也试过用这个改变它的位置:

position: absolute;
bottom: 0;

我的背景 CSS 如下:

.Background {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100vw;
    height: 100vh;
    background-image: url('resources/background.png');
    background-size: cover;
    background-position: center;
}

如果有人能提供帮助那就太好了。

谢谢

最佳答案

div.Background 必须有一个 position:relative 样式或者一个里面有 position: absolute 的 div 将不起作用。

.Background {
  width:100%;
  height:200px;
  background:green;
  position:relative;
}
#sitefooter {
  position: absolute;
  bottom: 0px;
  height: 130px;
  background-color: black;
  width: 100%;
  color:#fff;
}
<div class="Background">This is the outer div, 
  <div id="sitefooter">This is the inner div.</div>
</div>

关于html - CSS - 页脚显示在错误的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31212574/

相关文章:

html - 其他目录中带有 noscript 的样式表

html - 在 Bootstrap 列内创建页脚

html - 面临显示问题 :inline-block property

wpf - 有没有办法在 WPF 中创建粘性页脚?

html - 为什么我的页脚是这样显示的

javascript - 同一选择器上的多个 Html 方法

javascript - 无法获取 JSON 对象的 innerHTML

javascript - Bootstrap JS 脚本不工作

css - 边界底部没有完全跨越

html - 高度以像素为单位,而不是百分比