我正在尝试在主页组件的末尾放置页脚。在我的网站中，溢出仅针对具有媒体查询的移动视图自动设置，因此桌面视图的滚动保持隐藏状态。我已经使用了我能找到的所有解决方案，但没有任何帮助，页脚在底部的桌面视图中完全对齐，但对于移动视图，它在屏幕末尾(而不是页面(对齐。我不知道如何解决这个问题。
网站： https://shivamaima.netlify.com/
git： https://github.com/darwin619/portfolio
.homepage {
text-align: center;
width: 100%;
position:relative;
padding:0;
margin:0;
min-height:100vh;
top:0;
@media screen and (max-width: 600px) {
overflow: auto;
height: 100vh;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
这里有几个解决方案。代替bottom: 0使用：
margin-top: 100vh;
这会将页脚设置在视口高度的底部。
但是，您的页面有很多布局问题，这确实是一个创可贴。您应该考虑使用flexbox、min-height或grid来创建粘性页脚。
话虽如此，使用 react 的解决方案是它们在任何情况下都会有的。
以下解决方案更可取，因为它们是"真正的"动态粘性页脚。这意味着，页脚将停留在底部，直到主要内容超出该区域，此时页脚将开始向下调整其位置：
最小高度解决方案
nav {
height: 40px;
padding: 10px;
background: lightblue;
}
main {
padding: 20px;
background: purple;
min-height: calc(100vh - 170px);
}
footer {
background: magenta;
padding: 10px;
height: 50px;
}<html>
<body>
<nav>
Navigation
</nav>
<main>
Page content
</main>
<footer>
Footer that stays put
</footer>
</body>
</html>可以看出，我们将内容物的最小高度设置为100vh减去您的nav和content容器的组合高度(加上填充(。
这会导致页脚粘附，并且如果内容超过min-height值，则可以进一步下降。
使用flexbox也可以达到同样的效果，这可以说是一个更动态的解决方案。但是，它以牺牲额外的容器元素为代价。我们可以将flex应用于body，但这很少是一个正确的解决方案：
弹性盒解决方案
.container {
display: flex;
min-height: calc(100vh - 40px);
flex-direction: column;
}
nav {
height: 40px;
padding: 10px;
background: lightblue;
}
main {
padding: 20px;
background: purple;
flex: 1;
}
footer {
background: magenta;
padding: 10px;
height: 50px;
}<body>
// Use className instead of class for react (jsx)
<div class="container">
<nav>
Navigation
</nav>
<main>
Main Content Area
</main>
<footer>
Footer that stays put
</footer>
</div>
</body>具有最小高度的 CSS 网格解决方案
.container {
display: grid;
grid-gap: 1em 0;
grid: auto auto 1fr / 10vw 1fr 10vw;
margin: 0;
min-height: calc(100vh - 40px);
}
nav {
background-color: lightblue;
grid-column: 2;
padding: 20px;
}
main {
background-color: purple;
display: grid;
grid-column: 2;
padding: 20px;
}
footer {
background-color: magenta;
align-self: end;
grid-column: 2;
padding: 20px;
}// Use className instead of class for react (jsx)
<div class="container">
<nav>
Navigation
</nav>
<main>
Main Content Area
</main>
<footer>
Footer that stays put
</footer>
</div>注意：如果您正在处理 react 项目，请将class更改为className。