移动端HTML/CSS页面滚动时Footer与主区域错位问题求助

问题现象 #

• 为网站www.cocktailcodex.net做移动端适配时，Footer组件出现滚动异常：滚动到页面底部后继续滚动，Footer与main div会出现分离或重叠情况
• 该问题仅在真实移动设备上出现，PC端F12开发者工具无法复现
• 已尝试为Footer添加overflow和max-height属性，未解决问题

相关代码 #

原始CSS代码

:root {
    --mainColor: rgb(255, 153, 28);
    --hoverColor: rgb(245, 143, 18);
    --backColor: white;
    --divColor: rgb(249, 224, 175);
    --divHoverColor: rgb(239, 214, 165);
    --darkText: black;
    --lightText: white;
}

@media (min-width:320px)  { 
/* smartphones, iPhone, portrait 480x320 phones */ 
:root {
    --a: 50px;
    --b: 60px;
    --c: 80px;
    --d: 32px;
    --e: 100px;
    --f: 30px;
    --g: 35px;
    --h: 70px;
    --cocktailmargin: 1%;
    --sidebar: 40%;
    --content: 55%;
    --sbwidth: 75%;
    --bwidth: 30%;

    --basecurve: 30px;
    --basenavheight: 160px;
    --basesearchwidth: 60%;
    --basesearchheight: 100px;
    --baseiconsize: 150px;
    --basedropsize: 100px;
    --basesearchloop: 100px;
    --basedropleft: -300px;
    --basedropmin: 410px;
    --basedroppad: 10px;
}
}

@media (min-width:481px)  { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
}

@media (min-width:641px)  { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
}

@media (min-width:961px)  { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
}

@media (min-width:1025px) { 
    /* big landscape tablets, laptops, and desktops */ 
}

@media (min-width:1281px) { 
/* hi-res laptops and desktops */ 
:root {
    --a: 20px;
    --b: 30px;
    --c: 40px;
    --d: 16px;
    --e: 50px;
    --f: 15px;
    --g: 20px;
    --h: 20px;
    --cocktailmargin: 5%;
    --sidebar: 40%;
    --content: 55%;
    --sbwidth: 75%;
    --bwidth: 30%;
}
}

@media (min-aspect-ratio: 21/9) {
    :root {
        --cocktailmargin: 20%;
        --sidebar: 35%;
        --content: 60%;
        --sbwidth: 80%;
    }
}

@media screen and (max-width: 300px) {
    #settings .cancelbtn, #settings .deletebtn {
       width: 100%;
       border-radius: 10px;
    }
}

* {
    margin: 0px;
    font-family: 'Quicksand';
    -webkit-tap-highlight-color: transparent;
}

html {
    background-color: var(--backColor);
    height: 100%;
    overflow: auto!important;
    max-height: 100% !important;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto!important;
    max-height: 100% !important;
}

/* Footer */
footer {
background-color: var(--mainColor);
position: relative;
clear: both;
text-align: center;
color: var(--lightText);
padding: 50px 0px 50px 0px;
flex-shrink: 0;
}

footer p {
    color: var(--lightText);
    font-size: var(--g);
}

HTML代码

<body>
<nav class="sticky">
    <!-- header items like searchbar -->
</nav>
<div id="main">
    {% block main %}
    {% endblock %}
</div>
<footer>
    <p>Copyright &#169; 2023 CocktailCodex All Rights Reserved</p>
    <p>Contact info@cocktailcodex.net</p>
</footer>
<script src="{{ STATIC_URL }}/static/script.js"></script>
</body>

尝试修改后的Footer CSS代码

footer {
background-color: var(--mainColor);
position: relative;
clear: both;
text-align: center;
color: var(--lightText);
padding: 50px 0px 50px 0px;
flex-shrink: 0;
overflow: auto!important;
max-height: 100% !important;
}

内容的提问来源于stack exchange，提问作者kersjan14