首页 文章

将背景 Span div保留在页面底部，而不是窗口

提问于
浏览 次
0

我有一个 span 元素作为纯色背景，高度为300px . 我希望这个span块始终位于页面的底部，而不是当前正在发生的窗口/屏幕 . 有人能帮我吗？

html,
body {
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  max-width: 800px;
}

.blue-bg {
  background: #049ae6;
  bottom: 0;
  display: block;
  height: 300px;
  position: absolute;
  width: 100%;
  z-index: -1;
}

<div id="wrapper">
  <section id="content">
    blah blah blah
  </section>
</div>
<span class="blue-bg"></span>

内容将与底部附近的span元素重叠，如下所示：

enter image description here

html css

2 回答

  • 0

    将 position: absolute; 更改为 position: fixed .

    位置：固定;位置的元素：固定;相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置 . top，right，bottom和left属性用于定位元素 .

    https://www.w3schools.com/css/css_positioning.asp

    回复于
  • 0

    UPDATE ： position: absolute 是正确的，但是：

    具有位置的元素：绝对;相对于最近定位的祖先定位（而不是相对于视口定位，如固定） . 然而;如果绝对定位元素没有定位祖先，它将使用文档正文，并随页面滚动一起移动 .

    （https://www.w3schools.com/css/css_positioning.asp）

    所以，我介绍了另一个位置为 relative 的包装元素（#page） .

    html, body {
    min-height: 100%;
    height: 100%;
}
#page {
  position: relative;
}
#wrapper {
    margin: 0 auto;
    height: 1000px; /* to force scrolling */
    max-width: 800px;
}
.blue-bg {
    background: #049ae6;
    bottom: 0;
    display: block;
    height: 300px;
    position: absolute;
    width: 100%;
    z-index: -1;
}

    <div id="page">
    <div id="wrapper">
      <section id="content">
          blah blah blah
      </section>
    </div>  
    <span class="blue-bg"></span>
  </div>
    回复于

相关问题