Home > Software design >  Align div on the bottom of menu container - Not visible on mobile device
Align div on the bottom of menu container - Not visible on mobile device

Time：05-27

I have a mobile sidenav menu that appears and disappears when the button is clicked. What I'm trying to do is place <div > at the bottom of the menu. I tried to insert in the css position: absolute; and bottom: 0; It is actually going down, but then on mobile devices the footer is not there, it comes out of the screen and is in a lower position than where it should be.

Edit: Thanks to AStombaugh's solution I solved the problem. However, from his solution I preferred to use the display: flex; and justify-content: space-between;. Also I moved the footer div, out of the menu container. That way I don't even have any overlap problems.

   // 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)" >Open Menu</div>
        <div id="mtsMenu">
            <div > 
                <div >
                 <span >Hello User</span>
                 <span >display_email</span>
                </div>
                <div >
                 <a  href="/#"><span>Login</span></a>
                 <a  href="/#"><span>Registrati</span></a>
                </div>
                
                <hr  />
            
                <!--Global Navbar-->
                <div >
                    <div >
                     <a href="https://www.motustrength.it">
                      <i >icon</i>
                      <span >Homepage</span>
                     </a>
                     <a href="/account">
                      <i >icon</i>
                      <span >Articoli</span>
                     </a>
                     <a href="/account">
                      <i >icon</i>
                      <span >Shop</span>
                     </a>
                    </div>
                
                    <div >
                     <span >Calcolatori</span>
                    </div>
                    <div >
                     <a href="#">Macros Calculator</a>
                     <a href="#">TDEE Calculator</a>
                    </div>
                </div>
                <!--End Global Navbar-->

                <!--User Navbar-->
                <div >
                 <span >Account Menu</span>
                </div>
                <div >
                 <a href="#">
                  <i >icon</i>
                  <span >Dashboard</span>
                 </a>
                 <a href="#">
                  <i >icon</i>
                  <span >I miei ordini</span>
                 </a>
                 <a href="#">
                  <i >icon</i>
                  <span >Downloads</span>
                 </a>
                 <a href="#">
                  <i >icon</i>
                  <span >Impostazioni</span>
                 </a>
                 <a href="#">
                  <i >icon</i>
                  <span >Logout</span>
                 </a>
                </div>
                 <!--End User Navbar-->
               </div>
               <div >
                 <hr  />
                 <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>

CodePudding user response：

The problem is what you're really looking for is fixed. absolute is going to go to the absolute bottom at 0 but if you add a value it changes based on the screen size because it's absolutely positioned. However, if you just go in and change the footer to fixed it's not visible all of the time and not just in the menu.

So, to work around that, I created a container specifically for the purpose of keeping your footer from interacting with your other HTML and sized accordingly with the menu, then put your footer inside that container and positioned it using fixed. I just tried it on my phone and it appears to be working.

Realistically, I think you're going to need a media query @media for this at some point because things are overlapping anyway but this at least addresses the current issue. 

// 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)" >Open Menu</div>

<div id="mtsMenu">
  <div >
    <div >
      <span >Hello User</span>
      <span >display_email</span>
    </div>
    <div >
      <a href="/#"><span>Login</span></a>
      <a href="/#"><span>Registrati</span></a>
    </div>

    <hr  />

    <!--Global Navbar-->
    <div >
      <div >
        <a href="https://www.motustrength.it">
          <i >icon</i>
          <span >Homepage</span>
        </a>
        <a href="/account">
          <i >icon</i>
          <span >Articoli</span>
        </a>
        <a href="/account">
          <i >icon</i>
          <span >Shop</span>
        </a>
      </div>

      <div >
        <span >Calcolatori</span>
      </div>
      <div >
        <a href="#">Macros Calculator</a>
        <a href="#">TDEE Calculator</a>
      </div>
    </div>
    <!--End Global Navbar-->

    <!--User Navbar-->
    <div >
      <span >Account Menu</span>
    </div>
    <div >
      <a href="#">
        <i >icon</i>
        <span >Dashboard</span>
      </a>
      <a href="#">
        <i >icon</i>
        <span >I miei ordini</span>
      </a>
      <a href="#">
        <i >icon</i>
        <span >Downloads</span>
      </a>
      <a href="#">
        <i >icon</i>
        <span >Impostazioni</span>
      </a>
      <a href="#">
        <i >icon</i>
        <span >Logout</span>
      </a>
    </div>
  </div>
  <!--End User Navbar-->
  <div >
    <div >
      <hr  />
      <span>
          THIS IS FOOTER CONTENT - THIS IS FOOTER CONTENT
        </span>
    </div>
  </div>
</div>

<div id="container_overlay"></div>

Page link：https//www.codepudding.com/Softwaredesign/421150.html

Prev:How to link Mapping in HTML with the js alert function
Next:Giving width to div in bootstrap grid
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding