CSS 页脚在小屏幕尺寸下不会停留在底部

Question

我的网站出现问题，在较小的屏幕尺寸下，我的页脚无法停留在页面底部。

照片： 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%; }

并没有奏效。 我在页脚上尝试了 position relative on.main 和 position absolute 的东西，但没有用。

Answer 1

使用高度时：100%； 在 css 中，确保您的页脚之前的 HTML 节点子节点也处于 100%，如果您有容器，则不会占用全屏页面

Answer 2

尝试使用媒体查询：

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

删除这个：

html {
   margin: 0;
   padding: 0;
}

添加：

* {
   margin: 0;
   padding: 0;
}

不要对html标签使用样式。

Answer 3

添加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;
}

Answer 4

我添加了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;


    }

Answer 5

您可以尝试使用 position：粘性。

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

Answer 6

使用页脚高度和宽度百分比，并给页脚 position：sticky 现在无论屏幕大小有多大，页脚都会粘在页面上。