在菜单容器底部对齐 div - 在移动设备上不可见
Align div on the bottom of menu container - Not visible on mobile device
我有一个移动端导航菜单，单击该按钮时会出现和消失。我想要做的是将 <div class="mtsMenu_footer"> 放在菜单的底部。我试着在 css position: absolute; 和 bottom: 0; 中插入它实际上是向下的，但是在移动设备上页脚不存在，它从屏幕中出来并且在较低的位置位置比应该的位置。
编辑：感谢 AStombaugh 的解决方案，我解决了这个问题。但是，从他的解决方案来看，我更喜欢使用 display: flex; 和 justify-content: space-between;。此外，我将页脚 div 移出了菜单容器。这样我什至没有任何重叠问题。
// Sidebar Menu
var mobileMenu = document.querySelector(".btnmenu");
function openMenu(e) {
e.stopPropagation();
//Show & Hide Menu
var x = document.getElementById("mtsMenu");
x.classList.toggle("show");
let toggle = document.querySelector('.btnmenu');
toggle.classList.toggle("visible");
//Show & Hide Overlay
var y = document.getElementById("container_overlay");
y.classList.toggle("on");
//Prevent Page scroll with overflow
var z = document.getElementsByTagName("body")[0];
z.classList.toggle("ppscroll");
}
// Close Menu clicking on container_overlay
document.getElementById("container_overlay").addEventListener("click", function (e) {
// For var x
var x = document.getElementById("mtsMenu");
if (e.target.id !== "mtsMenu" && x.classList.contains("show")) {
x.classList.toggle("show");
let toggle = document.querySelector('.btnmenu');
toggle.classList.toggle("visible");
}
// For var y
var y = document.getElementById("container_overlay");
if (e.target.id !== "mtsMenu" && y.classList.contains("on")) {
y.classList.toggle("on");
}
// For var z
var z = document.getElementsByTagName("body")[0];
if (e.target.id !== "mtsMenu" && z.classList.contains("ppscroll")) {
z.classList.toggle("ppscroll");
}
});
// Dropdown Menu
var dropdownBtn = document.querySelectorAll('.buttonDropdown');
iconDrop = null;
lastOpened = null; //Add this for toggling dropdown
dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
var dropCont = this.nextElementSibling;
let icon = this.querySelector('.iconDropdown');
icon.classList.toggle("visible");
dropCont.classList.toggle("show");
//Add this for toggling dropdown
if (lastOpened && lastOpened !== dropCont)
lastOpened.classList.remove("show");
lastOpened = dropCont;
if (iconDrop && iconDrop !== icon)
iconDrop.classList.remove("visible");
iconDrop = icon;
}));
/*Icon Button Menu*/
.btnmenu {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 20%;
color: #000;
position: absolute;
right: 0;
}
.btnmenu:before {
font-family: fontAwesome;
content: '\f0c9';
float: right;
z-index: 1000;
font-size: 18px;
}
.btnmenu.visible:before {
font-family: fontAwesome;
content: '\f00d';
}
/*Main Div*/
#mtsMenu {
display: flex;
flex-direction: column;
justify-content: space-between;
top: 0;
left: -100%;
padding: 20px;
background-color: #fff;
min-width: 160px;
overflow-x: hidden;
overflow-y: auto;
z-index: 999;
position: fixed;
width: 80%;
height: 100vh;
transition: 0.3s;
}
#mtsMenu.show {
left: 0;
}
/*Container Menu*/
.mtsMenu_container {
display: block;
width: 100%;
}
/*Menu header info*/
.loggedIn_header {
display: flex;
flex-direction: column;
}
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
.loggedOut_header {
display: flex;
justify-content: space-between;
}
.loggedOut_header > a {
display: flex;
width: 49.5%;
justify-content: center;
background: #fbfbfb;
border: 1px solid #eee;
border-radius: 3px;
padding: 4px;
color: #75777d;
font-size: 12px;
font-weight: 500;
}
.loggedOut_header > a:focus {
background: #1E87F0;
color: #fff;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Navbar Items Css*/
.navbarItems {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.navbarItems > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.navbarItems > a:focus {
color: #1E87F0;
}
/*Global Navbar*/
.buttonDropdown {
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.iconDropdown {
display: flex;
justify-content: space-between;
}
.iconDropdown:after {
font-family: fontAwesome;
font: var(--fa-font-light);
content: '\f107';
margin-left: auto;
font-size: 16px;
}
.iconDropdown.visible:after {
font-family: fontAwesome;
font: var(--fa-font-light);
content: '\f068';
}
.iconDropdown.calculator:before {
font-family: fontAwesome;
font: var(--fa-font-light);
font-size: 18px;
content: '\f1ec';
margin-right: 10px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.navbarItems.dropdown {
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.navbarItems.dropdown.show {
max-height: 300px;
transition: max-height 0.2s ease-in;
}
.navbarItems.dropdown > a {
margin-left: 25px;
}
/*Account Menu*/
.iconDropdown.accountMenu:before {
font-family: fontAwesome;
font: var(--fa-font-light);
font-size: 18px;
content: '\f2bd';
margin-right: 10px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
}
/*Icon Items Menu*/
.icn_items:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px;
}
.icn_items {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/*Footer Menu*/
.mtsMenu_footer {
}
/* User Menu For header website */
#container_overlay {
visibility: hidden;
position: fixed;
z-index: 998;
top: 0;
left: 0;
width: 100%;
background: #000000d6;
opacity: 0;
transition: 0.3s;
height: 100vh;
}
#container_overlay.on {
visibility: visible;
opacity: 1;
}
/*Prevent Page scroll Class*/
.ppscroll {
overflow: hidden;
}
<div onclick="openMenu(event)" class="btnmenu">Open Menu</div>
<div id="mtsMenu">
<div class="mtsMenu_container">
<div class="loggedIn_header">
<span class="display name">Hello User</span>
<span class="display mail">display_email</span>
</div>
<div class="loggedOut_header">
<a href="/#"><span>Login</span></a>
<a href="/#"><span>Registrati</span></a>
</div>
<hr class="solid" />
<!--Global Navbar-->
<div class="mtsMenu_navbar">
<div class="navbarItems">
<a href="https://www.motustrength.it">
<i class="icn_items fa-light fa-house-user">icon</i>
<span class="link_text">Homepage</span>
</a>
<a href="/account">
<i class="icn_items fa-light fa-newspaper">icon</i>
<span class="link_text">Articoli</span>
</a>
<a href="/account">
<i class="icn_items fa-light fa-cart-shopping-fast">icon</i>
<span class="link_text">Shop</span>
</a>
</div>
<div class="buttonDropdown">
<span class="iconDropdown calculator">Calcolatori</span>
</div>
<div class="navbarItems dropdown">
<a href="#">Macros Calculator</a>
<a href="#">TDEE Calculator</a>
</div>
</div>
<!--End Global Navbar-->
<!--User Navbar-->
<div class="buttonDropdown">
<span class="iconDropdown accountMenu">Account Menu</span>
</div>
<div class="navbarItems dropdown">
<a href="#">
<i class="icn_items fa-light fa-user">icon</i>
<span class="link_text">Dashboard</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-basket-shopping">icon</i>
<span class="link_text">I miei ordini</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-cloud-arrow-down">icon</i>
<span class="link_text">Downloads</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-gear">icon</i>
<span class="link_text">Impostazioni</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-arrow-right-from-bracket">icon</i>
<span class="link_text">Logout</span>
</a>
</div>
<!--End User Navbar-->
</div>
<div class="mtsMenu_footer">
<hr class="solid" />
<span>
THIS IS FOOTER CONTENT - THIS IS FOOTER CONTENT -THIS IS FOOTER CONTENT - THIS IS
FOOTER CONTENT
</span>
</div>
</div>
<div id="container_overlay"></div>
问题是您真正要寻找的是 fixed。 absolute 将在 0 处到达绝对底部，但如果您添加一个值，它会根据屏幕尺寸发生变化，因为它是绝对定位的。但是，如果您只是进入并将页脚更改为 fixed，它不会一直可见，而不仅仅是在菜单中。
因此，为了解决这个问题，我创建了一个专门用于防止页脚与其他页脚交互的容器 HTML 并根据菜单调整大小，然后将页脚放入该容器并定位它使用 fixed。我刚刚在我的 phone 上试了一下，它似乎可以正常工作。
现实，我认为您在某些时候需要媒体查询@media，因为无论如何事情都是重叠的，但这至少解决了当前的问题。
// Sidebar Menu
var mobileMenu = document.querySelector(".btnmenu");
function openMenu(e) {
e.stopPropagation();
//Show & Hide Menu
var x = document.getElementById("mtsMenu");
x.classList.toggle("show");
let toggle = document.querySelector('.btnmenu');
toggle.classList.toggle("visible");
//Show & Hide Overlay
var y = document.getElementById("container_overlay");
y.classList.toggle("on");
//Prevent Page scroll with overflow
var z = document.getElementsByTagName("body")[0];
z.classList.toggle("ppscroll");
}
// Close Menu clicking on container_overlay
document.getElementById("container_overlay").addEventListener("click", function(e) {
// For var x
var x = document.getElementById("mtsMenu");
if (e.target.id !== "mtsMenu" && x.classList.contains("show")) {
x.classList.toggle("show");
let toggle = document.querySelector('.btnmenu');
toggle.classList.toggle("visible");
}
// For var y
var y = document.getElementById("container_overlay");
if (e.target.id !== "mtsMenu" && y.classList.contains("on")) {
y.classList.toggle("on");
}
// For var z
var z = document.getElementsByTagName("body")[0];
if (e.target.id !== "mtsMenu" && z.classList.contains("ppscroll")) {
z.classList.toggle("ppscroll");
}
});
// Dropdown Menu
var dropdownBtn = document.querySelectorAll('.buttonDropdown');
iconDrop = null;
lastOpened = null; //Add this for toggling dropdown
dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
var dropCont = this.nextElementSibling;
let icon = this.querySelector('.iconDropdown');
icon.classList.toggle("visible");
dropCont.classList.toggle("show");
//Add this for toggling dropdown
if (lastOpened && lastOpened !== dropCont)
lastOpened.classList.remove("show");
lastOpened = dropCont;
if (iconDrop && iconDrop !== icon)
iconDrop.classList.remove("visible");
iconDrop = icon;
}));
/*Icon Button Menu*/
.btnmenu {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 20%;
color: #000;
position: absolute;
right: 0;
}
.btnmenu:before {
font-family: fontAwesome;
content: '\f0c9';
float: right;
z-index: 1000;
font-size: 18px;
}
.btnmenu.visible:before {
font-family: fontAwesome;
content: '\f00d';
}
/*Main Div*/
#mtsMenu {
top: 0;
left: -100%;
padding: 20px;
background-color: #fff;
min-width: 160px;
overflow-x: hidden;
overflow-y: auto;
z-index: 999;
position: fixed;
width: 80%;
height: 100vh;
transition: 0.3s;
}
#mtsMenu.show {
left: 0;
}
/*Container Menu*/
.mtsMenu_container {
display: block;
width: 100%;
}
/*Menu header info*/
.loggedIn_header {
display: flex;
flex-direction: column;
}
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
.loggedOut_header {
display: flex;
justify-content: space-between;
}
.loggedOut_header>a {
display: flex;
width: 49.5%;
justify-content: center;
background: #fbfbfb;
border: 1px solid #eee;
border-radius: 3px;
padding: 4px;
color: #75777d;
font-size: 12px;
font-weight: 500;
}
.loggedOut_header>a:focus {
background: #1E87F0;
color: #fff;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Navbar Items Css*/
.navbarItems {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.navbarItems>a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.navbarItems>a:focus {
color: #1E87F0;
}
/*Global Navbar*/
.buttonDropdown {
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.iconDropdown {
display: flex;
justify-content: space-between;
}
.iconDropdown:after {
font-family: fontAwesome;
font: var(--fa-font-light);
content: '\f107';
margin-left: auto;
font-size: 16px;
}
.iconDropdown.visible:after {
font-family: fontAwesome;
font: var(--fa-font-light);
content: '\f068';
}
.iconDropdown.calculator:before {
font-family: fontAwesome;
font: var(--fa-font-light);
font-size: 18px;
content: '\f1ec';
margin-right: 10px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.navbarItems.dropdown {
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.navbarItems.dropdown.show {
max-height: 300px;
transition: max-height 0.2s ease-in;
}
.navbarItems.dropdown>a {
margin-left: 25px;
}
/*Account Menu*/
.iconDropdown.accountMenu:before {
font-family: fontAwesome;
font: var(--fa-font-light);
font-size: 18px;
content: '\f2bd';
margin-right: 10px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
}
/*Icon Items Menu*/
.icn_items:before,
.icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px;
}
.icn_items {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/*Footer Menu*/
.footerContainer {
margin: 0 auto;
width: 100%;
height: auto;
position: relative;
display: flex;
flex-direction: row;
}
.mtsMenu_footer {
display: flex;
flex-direction: column;
width: 80%;
margin: 0 auto;
position: fixed;
bottom: 0;
height: fit-content;
}
/* User Menu For header website */
#container_overlay {
visibility: hidden;
position: fixed;
z-index: 998;
top: 0;
left: 0;
width: 100%;
background: #000000d6;
opacity: 0;
transition: 0.3s;
height: 100vh;
}
#container_overlay.on {
visibility: visible;
opacity: 1;
}
/*Prevent Page scroll Class*/
.ppscroll {
overflow: hidden;
}
<div onclick="openMenu(event)" class="btnmenu">Open Menu</div>
<div id="mtsMenu">
<div class="mtsMenu_container">
<div class="loggedIn_header">
<span class="display name">Hello User</span>
<span class="display mail">display_email</span>
</div>
<div class="loggedOut_header">
<a href="/#"><span>Login</span></a>
<a href="/#"><span>Registrati</span></a>
</div>
<hr class="solid" />
<!--Global Navbar-->
<div class="mtsMenu_navbar">
<div class="navbarItems">
<a href="https://www.motustrength.it">
<i class="icn_items fa-light fa-house-user">icon</i>
<span class="link_text">Homepage</span>
</a>
<a href="/account">
<i class="icn_items fa-light fa-newspaper">icon</i>
<span class="link_text">Articoli</span>
</a>
<a href="/account">
<i class="icn_items fa-light fa-cart-shopping-fast">icon</i>
<span class="link_text">Shop</span>
</a>
</div>
<div class="buttonDropdown">
<span class="iconDropdown calculator">Calcolatori</span>
</div>
<div class="navbarItems dropdown">
<a href="#">Macros Calculator</a>
<a href="#">TDEE Calculator</a>
</div>
</div>
<!--End Global Navbar-->
<!--User Navbar-->
<div class="buttonDropdown">
<span class="iconDropdown accountMenu">Account Menu</span>
</div>
<div class="navbarItems dropdown">
<a href="#">
<i class="icn_items fa-light fa-user">icon</i>
<span class="link_text">Dashboard</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-basket-shopping">icon</i>
<span class="link_text">I miei ordini</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-cloud-arrow-down">icon</i>
<span class="link_text">Downloads</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-gear">icon</i>
<span class="link_text">Impostazioni</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-arrow-right-from-bracket">icon</i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
<!--End User Navbar-->
<div class="footerContainer">
<div class="mtsMenu_footer">
<hr class="solid" />
<span>
THIS IS FOOTER CONTENT - THIS IS FOOTER CONTENT
</span>
</div>
</div>
</div>
<div id="container_overlay"></div>
我有一个移动端导航菜单，单击该按钮时会出现和消失。我想要做的是将 <div class="mtsMenu_footer"> 放在菜单的底部。我试着在 css position: absolute; 和 bottom: 0; 中插入它实际上是向下的，但是在移动设备上页脚不存在，它从屏幕中出来并且在较低的位置位置比应该的位置。
编辑：感谢 AStombaugh 的解决方案，我解决了这个问题。但是，从他的解决方案来看，我更喜欢使用 display: flex; 和 justify-content: space-between;。此外，我将页脚 div 移出了菜单容器。这样我什至没有任何重叠问题。
// Sidebar Menu
var mobileMenu = document.querySelector(".btnmenu");
function openMenu(e) {
e.stopPropagation();
//Show & Hide Menu
var x = document.getElementById("mtsMenu");
x.classList.toggle("show");
let toggle = document.querySelector('.btnmenu');
toggle.classList.toggle("visible");
//Show & Hide Overlay
var y = document.getElementById("container_overlay");
y.classList.toggle("on");
//Prevent Page scroll with overflow
var z = document.getElementsByTagName("body")[0];
z.classList.toggle("ppscroll");
}
// Close Menu clicking on container_overlay
document.getElementById("container_overlay").addEventListener("click", function (e) {
// For var x
var x = document.getElementById("mtsMenu");
if (e.target.id !== "mtsMenu" && x.classList.contains("show")) {
x.classList.toggle("show");
let toggle = document.querySelector('.btnmenu');
toggle.classList.toggle("visible");
}
// For var y
var y = document.getElementById("container_overlay");
if (e.target.id !== "mtsMenu" && y.classList.contains("on")) {
y.classList.toggle("on");
}
// For var z
var z = document.getElementsByTagName("body")[0];
if (e.target.id !== "mtsMenu" && z.classList.contains("ppscroll")) {
z.classList.toggle("ppscroll");
}
});
// Dropdown Menu
var dropdownBtn = document.querySelectorAll('.buttonDropdown');
iconDrop = null;
lastOpened = null; //Add this for toggling dropdown
dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
var dropCont = this.nextElementSibling;
let icon = this.querySelector('.iconDropdown');
icon.classList.toggle("visible");
dropCont.classList.toggle("show");
//Add this for toggling dropdown
if (lastOpened && lastOpened !== dropCont)
lastOpened.classList.remove("show");
lastOpened = dropCont;
if (iconDrop && iconDrop !== icon)
iconDrop.classList.remove("visible");
iconDrop = icon;
}));
/*Icon Button Menu*/
.btnmenu {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 20%;
color: #000;
position: absolute;
right: 0;
}
.btnmenu:before {
font-family: fontAwesome;
content: '\f0c9';
float: right;
z-index: 1000;
font-size: 18px;
}
.btnmenu.visible:before {
font-family: fontAwesome;
content: '\f00d';
}
/*Main Div*/
#mtsMenu {
display: flex;
flex-direction: column;
justify-content: space-between;
top: 0;
left: -100%;
padding: 20px;
background-color: #fff;
min-width: 160px;
overflow-x: hidden;
overflow-y: auto;
z-index: 999;
position: fixed;
width: 80%;
height: 100vh;
transition: 0.3s;
}
#mtsMenu.show {
left: 0;
}
/*Container Menu*/
.mtsMenu_container {
display: block;
width: 100%;
}
/*Menu header info*/
.loggedIn_header {
display: flex;
flex-direction: column;
}
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
.loggedOut_header {
display: flex;
justify-content: space-between;
}
.loggedOut_header > a {
display: flex;
width: 49.5%;
justify-content: center;
background: #fbfbfb;
border: 1px solid #eee;
border-radius: 3px;
padding: 4px;
color: #75777d;
font-size: 12px;
font-weight: 500;
}
.loggedOut_header > a:focus {
background: #1E87F0;
color: #fff;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Navbar Items Css*/
.navbarItems {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.navbarItems > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.navbarItems > a:focus {
color: #1E87F0;
}
/*Global Navbar*/
.buttonDropdown {
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.iconDropdown {
display: flex;
justify-content: space-between;
}
.iconDropdown:after {
font-family: fontAwesome;
font: var(--fa-font-light);
content: '\f107';
margin-left: auto;
font-size: 16px;
}
.iconDropdown.visible:after {
font-family: fontAwesome;
font: var(--fa-font-light);
content: '\f068';
}
.iconDropdown.calculator:before {
font-family: fontAwesome;
font: var(--fa-font-light);
font-size: 18px;
content: '\f1ec';
margin-right: 10px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.navbarItems.dropdown {
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.navbarItems.dropdown.show {
max-height: 300px;
transition: max-height 0.2s ease-in;
}
.navbarItems.dropdown > a {
margin-left: 25px;
}
/*Account Menu*/
.iconDropdown.accountMenu:before {
font-family: fontAwesome;
font: var(--fa-font-light);
font-size: 18px;
content: '\f2bd';
margin-right: 10px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
}
/*Icon Items Menu*/
.icn_items:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px;
}
.icn_items {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/*Footer Menu*/
.mtsMenu_footer {
}
/* User Menu For header website */
#container_overlay {
visibility: hidden;
position: fixed;
z-index: 998;
top: 0;
left: 0;
width: 100%;
background: #000000d6;
opacity: 0;
transition: 0.3s;
height: 100vh;
}
#container_overlay.on {
visibility: visible;
opacity: 1;
}
/*Prevent Page scroll Class*/
.ppscroll {
overflow: hidden;
}
<div onclick="openMenu(event)" class="btnmenu">Open Menu</div>
<div id="mtsMenu">
<div class="mtsMenu_container">
<div class="loggedIn_header">
<span class="display name">Hello User</span>
<span class="display mail">display_email</span>
</div>
<div class="loggedOut_header">
<a href="/#"><span>Login</span></a>
<a href="/#"><span>Registrati</span></a>
</div>
<hr class="solid" />
<!--Global Navbar-->
<div class="mtsMenu_navbar">
<div class="navbarItems">
<a href="https://www.motustrength.it">
<i class="icn_items fa-light fa-house-user">icon</i>
<span class="link_text">Homepage</span>
</a>
<a href="/account">
<i class="icn_items fa-light fa-newspaper">icon</i>
<span class="link_text">Articoli</span>
</a>
<a href="/account">
<i class="icn_items fa-light fa-cart-shopping-fast">icon</i>
<span class="link_text">Shop</span>
</a>
</div>
<div class="buttonDropdown">
<span class="iconDropdown calculator">Calcolatori</span>
</div>
<div class="navbarItems dropdown">
<a href="#">Macros Calculator</a>
<a href="#">TDEE Calculator</a>
</div>
</div>
<!--End Global Navbar-->
<!--User Navbar-->
<div class="buttonDropdown">
<span class="iconDropdown accountMenu">Account Menu</span>
</div>
<div class="navbarItems dropdown">
<a href="#">
<i class="icn_items fa-light fa-user">icon</i>
<span class="link_text">Dashboard</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-basket-shopping">icon</i>
<span class="link_text">I miei ordini</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-cloud-arrow-down">icon</i>
<span class="link_text">Downloads</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-gear">icon</i>
<span class="link_text">Impostazioni</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-arrow-right-from-bracket">icon</i>
<span class="link_text">Logout</span>
</a>
</div>
<!--End User Navbar-->
</div>
<div class="mtsMenu_footer">
<hr class="solid" />
<span>
THIS IS FOOTER CONTENT - THIS IS FOOTER CONTENT -THIS IS FOOTER CONTENT - THIS IS
FOOTER CONTENT
</span>
</div>
</div>
<div id="container_overlay"></div>
问题是您真正要寻找的是 fixed。 absolute 将在 0 处到达绝对底部，但如果您添加一个值，它会根据屏幕尺寸发生变化，因为它是绝对定位的。但是，如果您只是进入并将页脚更改为 fixed，它不会一直可见，而不仅仅是在菜单中。
因此，为了解决这个问题，我创建了一个专门用于防止页脚与其他页脚交互的容器 HTML 并根据菜单调整大小，然后将页脚放入该容器并定位它使用 fixed。我刚刚在我的 phone 上试了一下，它似乎可以正常工作。
现实，我认为您在某些时候需要媒体查询@media，因为无论如何事情都是重叠的，但这至少解决了当前的问题。
// Sidebar Menu
var mobileMenu = document.querySelector(".btnmenu");
function openMenu(e) {
e.stopPropagation();
//Show & Hide Menu
var x = document.getElementById("mtsMenu");
x.classList.toggle("show");
let toggle = document.querySelector('.btnmenu');
toggle.classList.toggle("visible");
//Show & Hide Overlay
var y = document.getElementById("container_overlay");
y.classList.toggle("on");
//Prevent Page scroll with overflow
var z = document.getElementsByTagName("body")[0];
z.classList.toggle("ppscroll");
}
// Close Menu clicking on container_overlay
document.getElementById("container_overlay").addEventListener("click", function(e) {
// For var x
var x = document.getElementById("mtsMenu");
if (e.target.id !== "mtsMenu" && x.classList.contains("show")) {
x.classList.toggle("show");
let toggle = document.querySelector('.btnmenu');
toggle.classList.toggle("visible");
}
// For var y
var y = document.getElementById("container_overlay");
if (e.target.id !== "mtsMenu" && y.classList.contains("on")) {
y.classList.toggle("on");
}
// For var z
var z = document.getElementsByTagName("body")[0];
if (e.target.id !== "mtsMenu" && z.classList.contains("ppscroll")) {
z.classList.toggle("ppscroll");
}
});
// Dropdown Menu
var dropdownBtn = document.querySelectorAll('.buttonDropdown');
iconDrop = null;
lastOpened = null; //Add this for toggling dropdown
dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
var dropCont = this.nextElementSibling;
let icon = this.querySelector('.iconDropdown');
icon.classList.toggle("visible");
dropCont.classList.toggle("show");
//Add this for toggling dropdown
if (lastOpened && lastOpened !== dropCont)
lastOpened.classList.remove("show");
lastOpened = dropCont;
if (iconDrop && iconDrop !== icon)
iconDrop.classList.remove("visible");
iconDrop = icon;
}));
/*Icon Button Menu*/
.btnmenu {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 20%;
color: #000;
position: absolute;
right: 0;
}
.btnmenu:before {
font-family: fontAwesome;
content: '\f0c9';
float: right;
z-index: 1000;
font-size: 18px;
}
.btnmenu.visible:before {
font-family: fontAwesome;
content: '\f00d';
}
/*Main Div*/
#mtsMenu {
top: 0;
left: -100%;
padding: 20px;
background-color: #fff;
min-width: 160px;
overflow-x: hidden;
overflow-y: auto;
z-index: 999;
position: fixed;
width: 80%;
height: 100vh;
transition: 0.3s;
}
#mtsMenu.show {
left: 0;
}
/*Container Menu*/
.mtsMenu_container {
display: block;
width: 100%;
}
/*Menu header info*/
.loggedIn_header {
display: flex;
flex-direction: column;
}
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
.loggedOut_header {
display: flex;
justify-content: space-between;
}
.loggedOut_header>a {
display: flex;
width: 49.5%;
justify-content: center;
background: #fbfbfb;
border: 1px solid #eee;
border-radius: 3px;
padding: 4px;
color: #75777d;
font-size: 12px;
font-weight: 500;
}
.loggedOut_header>a:focus {
background: #1E87F0;
color: #fff;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Navbar Items Css*/
.navbarItems {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.navbarItems>a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.navbarItems>a:focus {
color: #1E87F0;
}
/*Global Navbar*/
.buttonDropdown {
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.iconDropdown {
display: flex;
justify-content: space-between;
}
.iconDropdown:after {
font-family: fontAwesome;
font: var(--fa-font-light);
content: '\f107';
margin-left: auto;
font-size: 16px;
}
.iconDropdown.visible:after {
font-family: fontAwesome;
font: var(--fa-font-light);
content: '\f068';
}
.iconDropdown.calculator:before {
font-family: fontAwesome;
font: var(--fa-font-light);
font-size: 18px;
content: '\f1ec';
margin-right: 10px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.navbarItems.dropdown {
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.navbarItems.dropdown.show {
max-height: 300px;
transition: max-height 0.2s ease-in;
}
.navbarItems.dropdown>a {
margin-left: 25px;
}
/*Account Menu*/
.iconDropdown.accountMenu:before {
font-family: fontAwesome;
font: var(--fa-font-light);
font-size: 18px;
content: '\f2bd';
margin-right: 10px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
}
/*Icon Items Menu*/
.icn_items:before,
.icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px;
}
.icn_items {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/*Footer Menu*/
.footerContainer {
margin: 0 auto;
width: 100%;
height: auto;
position: relative;
display: flex;
flex-direction: row;
}
.mtsMenu_footer {
display: flex;
flex-direction: column;
width: 80%;
margin: 0 auto;
position: fixed;
bottom: 0;
height: fit-content;
}
/* User Menu For header website */
#container_overlay {
visibility: hidden;
position: fixed;
z-index: 998;
top: 0;
left: 0;
width: 100%;
background: #000000d6;
opacity: 0;
transition: 0.3s;
height: 100vh;
}
#container_overlay.on {
visibility: visible;
opacity: 1;
}
/*Prevent Page scroll Class*/
.ppscroll {
overflow: hidden;
}
<div onclick="openMenu(event)" class="btnmenu">Open Menu</div>
<div id="mtsMenu">
<div class="mtsMenu_container">
<div class="loggedIn_header">
<span class="display name">Hello User</span>
<span class="display mail">display_email</span>
</div>
<div class="loggedOut_header">
<a href="/#"><span>Login</span></a>
<a href="/#"><span>Registrati</span></a>
</div>
<hr class="solid" />
<!--Global Navbar-->
<div class="mtsMenu_navbar">
<div class="navbarItems">
<a href="https://www.motustrength.it">
<i class="icn_items fa-light fa-house-user">icon</i>
<span class="link_text">Homepage</span>
</a>
<a href="/account">
<i class="icn_items fa-light fa-newspaper">icon</i>
<span class="link_text">Articoli</span>
</a>
<a href="/account">
<i class="icn_items fa-light fa-cart-shopping-fast">icon</i>
<span class="link_text">Shop</span>
</a>
</div>
<div class="buttonDropdown">
<span class="iconDropdown calculator">Calcolatori</span>
</div>
<div class="navbarItems dropdown">
<a href="#">Macros Calculator</a>
<a href="#">TDEE Calculator</a>
</div>
</div>
<!--End Global Navbar-->
<!--User Navbar-->
<div class="buttonDropdown">
<span class="iconDropdown accountMenu">Account Menu</span>
</div>
<div class="navbarItems dropdown">
<a href="#">
<i class="icn_items fa-light fa-user">icon</i>
<span class="link_text">Dashboard</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-basket-shopping">icon</i>
<span class="link_text">I miei ordini</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-cloud-arrow-down">icon</i>
<span class="link_text">Downloads</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-gear">icon</i>
<span class="link_text">Impostazioni</span>
</a>
<a href="#">
<i class="icn_items fa-light fa-arrow-right-from-bracket">icon</i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
<!--End User Navbar-->
<div class="footerContainer">
<div class="mtsMenu_footer">
<hr class="solid" />
<span>
THIS IS FOOTER CONTENT - THIS IS FOOTER CONTENT
</span>
</div>
</div>
</div>
<div id="container_overlay"></div>