Question

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

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

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

我查看了不同的解决方案，并尝试了下：0以及位置：fixed和position：绝对，但是绝对只会使我主页上的页脚覆盖文本/视频部分和页脚，以及视频和文字的最底部。已修复，导致它位于所有内容上，并且页面底部的内容与绝对内容相同。

.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;
}

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

Answer 1

给您的身体一个min-height: 100vh的CSS规则，以确保您的页面永远不会比视口短。

您也可以考虑使用flex建立页眉/主/页脚布局。

body {
  margin: 0;
}

.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main > * {
  flex: 1 1 auto;
  background: bisque;
}

.main header,
.main footer {
  flex: 0 0 30px;
  background: tomato;
}

<div class="main">
  <header>Header</header>
  <div>Content</div>
  <footer>Footer</footer>
</div>

Answer 2

除了Ray Hatfield的答案外，我还将其添加到html元素中。这是我一直包含在我的网站中的内容：

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

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

2 个答案: