时间戳

首页 > 解决方案 > 页脚位于一个 html 页面的底部，但位于另一个页面的中间

html - 页脚位于一个 html 页面的底部，但位于另一个页面的中间

问题描述

我正在尝试在每个 HTML 页面的页面底部设置一个页脚。

在我的主索引页面上，它设置在底部，因为我在页面上有几个部分，其中包括一个文本块和一个并排位于页脚上方的视频。

在另一个 HTML 页面上，我只有导航栏和页脚样式。主标签没有内容。此页面上的页脚位于屏幕的一半。

我查看了不同的解决方案并尝试了底部：0 以及位置：固定和位置：绝对，但绝对只会导致我的主页上的页脚覆盖文本/视频部分和页脚之间的水平线，以及视频和文字的最底部。固定导致它位于所有内容之上，并且在页面底部与绝对相同。

.about {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 50%;
    font-size: 1.5em;
    float: left;
    height: 50vh;
    margin-top: 3em;
    left: 0;
    margin-bottom: 3em;
}

.videos {
    width: 50%;
    height: 50vh;
    float: left;
    margin-top: 3em;
    right: 0;
    margin-bottom: 3em;
}

.frontPageVideo {
    width: 95%;
    height: 100%;
}

footer {
    clear: both;
    background-color: rgb(0, 0, 0);
    height: 20vh;
    margin-top: 5em;
}

如何在每页底部设置页脚？

标签： htmlcss

解决方案

除了 Ray Hatfield 的回答之外，我还将它添加到html元素中。以下是我一直包含在我的网站中的内容：

html, body{
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
}

推荐阅读