Question

我的页脚似乎出现在页面顶部而不是底部。

我正在构建一个需要视频背景和中间内容的着陆页。当我插入页脚的代码时，页脚显示在顶部。我一直无视谷歌。

以下是我认为可能导致问题的CSS。

.contnt{
    background-color: rgba(0,0,0,0.4);
    position: absolute;
    width: 100%;
    min-height: 100%;
    
}


.background-wrap{
    position: fixed;
    z-index: -1000;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
}  
#video-bg-elem{
    position: absolute;
    background-size: cover;
    top: 0;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    
}


<!-----Css for the footer------->
  
.footer{
    height: 50px;
    background-color: black;
}

Answer 1

您的HTML丢失了，因此我只能猜测。但似乎页面中的其他元素没有使用默认定位（静态）。如果其他元素使用CSS绝对定位，则它们不占用默认流的空间。因此，您的页脚（没有绝对位置规则）是正常流程中的第一个元素，这使它显示在顶部。

Answer 2

您的.contnt有min-height: 100%。所有这些意味着它将尝试使用它的父元素的至少100％的高度。它并不意味着浏览器窗口高度的100％。如果父元素是（例如）0像素高，那么子元素也将是0像素高。

尝试为.contnt的父级提供绝对高度：

<html>
 ....
    <div class="someContainer">
      <div class="contnt"></div>
      <div class="footer"></div>
    </div>
</html>

.someContainer {
    height: 500px;
}

Answer 3

所以从我看到的问题是你的页脚没有position设置，因此它使用默认值。您应该尝试将此添加到footer类：

.footer{
    height: 50px;
    background-color: black;
    /*Add this...*/
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}

width: 100%;将页脚的宽度设置为与您拥有的窗口一样宽。 position: absolute;让你的页脚保持在一个确切的位置。你缺少的是bottom: 0px;，它会让它贴在你页面的底部。

如果您希望页脚停留在窗口底部全部时间，则应添加position: fixed;并再次添加bottom: 0px;。无论用户是否滚动（有点像StackOverflow上的导航栏，但在底部），这将创建一个将保留在那里的页脚。

您可能还想查看有关使用CSS定位元素的更多信息：https://www.w3schools.com/css/css_positioning.asp

这个页脚出现在页面顶部的可能原因是什么？

3 个答案: