CSS页脚不会在小屏幕上停留在底部

如何解决CSS页脚不会在小屏幕上停留在底部

我的网站有一个问题，在较小的屏幕尺寸上，我的页脚没有停留在页面底部。

照片：https://prnt.sc/zzjral

索引：

<div class="main">
    <div class="left-side">
        <div class="fav-matches--section">
            <div class="section__title">
                <span class="title">Meciuri favorite</span>
            </div>
            <div class="fav-matches">
            </div>
        </div>
        <div class="predicts">
        </div>
    </div>
    <div class="right-side">
        <div class="announcement">
            <span class="announce-title">-50%</span>
            <span class="announce-desc">VIP MEMBER</span>
        </div>
    </div>
</div>

页脚：

<footer class="site-footer">
    <div class="site-footer-legal">
        <ul class="social-list">
            <li class="social-list_item"><a class="icon" href=""><i class="fab fa-facebook-f"></i></a></li>
            <li class="social-list_item"><a class="icon" href=""><i class="fab fa-instagram"></i></a></li>
        </ul>
        <p class="desk"></p>
    </div>
    <div class="site-footer-right">
        <div class="bottom-menu">
            <div class="bottom-menu-links">
                <a></a>
                <a></a>
                <a></a>
                <a></a>
                <a></a>
            </div>
            <p class="desk-resp"></p>
            <p class="desk"></p>
        </div>
        <div class="text-responsible">
            <p></p>
        </div>
    </div>
</footer>

CSS：

html {
margin: 0;
padding: 0;
}

body {
    margin: 0;
    padding: 0;
    background: #313535;
    font-family: Roboto,sans-serif;
}

.main {
    display:flex;
    padding: 50px 50px;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 75px - 105px);
}

.site-footer {
    background: #202323;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 50px;
    min-width: 390px;
    width: 100%;
}

*注意：我尝试了：

html { height: 100vh; / height: 100%; }

并没有奏效。我尝试在 .main 上使用相对位置，在页脚上使用绝对位置，但没有奏效。

解决方法

当你使用高度时：100%；在 css 中，确保页脚之前的 HTML 节点子项也为 100%！ 如果你有一个容器，它不会占据全屏页面，否则

,

尝试使用媒体查询：

@media screen and (min-width: 500px) {
   site-footer {
      bottom:0px;
      position: relative;
   }
}

删除这个：

html {
   margin: 0;
   padding: 0;
}

添加：

* {
   margin: 0;
   padding: 0;
}

不要对html 标记使用样式。

,

它在 position: fixed; 中添加 bottom: 0; 和 .site-footer class 时起作用：

.site-footer {
   background: #202323;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 25px 50px;
   min-width: 390px;
   width: 100%;
   position: fixed;
   bottom: 0;
}

,

我添加了 position 和 bottom。希望这对你有用。

    .site-footer {
        background: #202323;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 25px 50px;
        min-width: 390px;
        width: 100%;
        position: fixed;
        bottom: 0;


    }

,

您可以尝试使用 position:sticky。

 .site-footer {
    background: #202323;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 50px;
    min-width: 390px;
    width: 100%;
    position: sticky;
    bottom: 0;
}