Div height different between chrome/edge and firefo-CodePudding

I'm designing a simple website with a navbar at the top, and an image that extends exactly from the bottom of the navbar to the bottom of the window (at the window's maximized size), such that the image fills up the rest of the screen, without a scrollbar. I'm putting the image in a wrapper div and I'll cut off any overflow, so it's the div sizing I'm worried about. My issue is that the sizing appears correct in Chrome and Edge, but in Firefox, the div does not extend to the bottom of the page. Here are the images for the three browsers... I removed the image, and gave the wrapper div a brown background so you can see it easily.

Appearance on Chrome

Appearance on Edge

Appearance on Firefox

Here's my JS that sets the div height:

document.addEventListener('DOMContentLoaded', function() {
  setInterval(function() {
    var homepageTopImageWrapper = document.getElementById("homePageTopImageWrapper");
    var browserBarsHeight = window.outerHeight - window.innerHeight;
    var height = window.screen.availHeight - browserBarsHeight - 58;
    height  = "px";
    homePageTopImageWrapper.style.height = height;
    console.log(window.screen.availHeight);
  }, 100);
}, false);

I added an event listener using JS to wait for all the DOM content to load, and then I calculated the correct height for my div by taking the availHeight and subtracting off 58px (the height of the navbar) and then subtracting the height of the toolbar at the top of the browser. The setInterval is so that the wrapper will resize right away if the user presses Ctrl Shift B.

Here's the relevant HTML:

<!--__________________________NAVIGATION BAR__________________________-->
    <div id = "navbarWrapper">

      <!--________Navigation Buttons________-->
      <div id = "leftNavbarButtonWrapper">
        <div  onclick="location.href='./ourMission_desktop.html'">Our Mission</div>
        <div  onclick="location.href='./team_desktop.html'">Team</div>
        <div  onclick="location.href='./services_desktop.html'">Services</div>
        <div  onclick="location.href='./contactUs_desktop.html'">Contact Us</div>
      </div>

      <!--________Social Media Buttons________-->
      <div id="navbarSocialMediaImageWrapper">
        <img class = "navbarSocialMediaImage" src="../images/facebook_logo_white.png" alt="Facebook logo/link" onclick="window.open('<link path>', '_blank')">
        <img class = "navbarSocialMediaImage" src="../images/twitter_logo_white.png" alt="Twitter logo/link" onclick="window.open('<link path>', '_blank')">
        <img class = "navbarSocialMediaImage" src="../images/instagram_logo_white.png" alt="Instagram logo/link" onclick="window.open('<link path>', '_blank')">
      </div>

      <!--________Donate Button________-->
      <button id = "donateButton" onclick="window.open('<link path>', '_blank')">Donate Now</button>
    </div>


    <!--__________________________HOMEPAGE CONTENT__________________________-->

    <!--________Top Homepage Image________-->
    <div id = "homePageTopImageWrapper">
      <img src = "<img src>">
    </div>

Finally, here's the CSS:

/*--------------------------------GLOBAL CONDITIONS--------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo 2:wght@500;700&family=Poppins:wght@300&display=swap');

* {
  margin: 0;
  padding: 0;
  font-family: Poppins;
}

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/*--------------------------------NAVIGATION BAR--------------------------------*/
#navbarWrapper {
  /*border: 1px solid black;*/
  width: 100%;
  height: 58px;
  background: black;
  display: inline-flex;
}

#leftNavbarButtonWrapper {
  /*border: 1px solid red;*/
  border-spacing: 1cm 0;
}

.leftNavbarButtons {
  /*border: 1px solid green;*/
  display: inline-flex;
  color: white;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin: 0 0.25cm 0 0.25cm;
  padding: 0 0.25cm 0 0.25cm;
}

.leftNavbarButtons:hover {
  color: #c2c2c2;
  cursor: pointer;
}

#donateButton {
  position: absolute;
  right: 2mm;
  top: 2mm;
  height: 1.1cm;
  width: 5cm;
  background: red;
  border: none;
  outline: none;
  color: white;
  font-size: 0.5cm;
  border-radius: 5px;
}

#donateButton:hover {
  cursor: pointer;
}

.navbarSocialMediaImage {
  /*border: 1px solid green;*/
  width: 0.6cm;
  height: 0.6cm;
  margin: 0 0.25cm 0 0.25cm;
}

#navbarSocialMediaImageWrapper {
  /*border: 1px solid red;*/
  height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 6cm;
  top: 0mm;
}

.navbarSocialMediaImage:hover {
  cursor: pointer;
}

/*--------------------------------HOMEPAGE--------------------------------*/
#homePageTopImageWrapper {
  /*border: 3px solid green;*/
  background: brown;
  position: absolute;
  display: flex;
  top: 58px;
  width: 100%;
  /*height: calc(100% - 1.5cm);*/
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

Any ideas on why this is working in Chrome/Edge but not in Firefox?

Thank you very much.

CodePudding user response：

I think you made the problem so complicated! You can reach your goal with only CSS styles and without the need to JavaScript codes. Here is the html and css that makes that:

/*--------------------------------GLOBAL CONDITIONS--------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo 2:wght@500;700&family=Poppins:wght@300&display=swap');

/* ------------------------------ */
/* I changed this part of code */
/* ------------------------------ */
*, *::after, *::before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Poppins;
}

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/*--------------------------------NAVIGATION BAR--------------------------------*/
#navbarWrapper {
    /*border: 1px solid black;*/
    width: 100%;
    height: 58px;
    background: black;
    display: inline-flex;
}

#leftNavbarButtonWrapper {
    /*border: 1px solid red;*/
    border-spacing: 1cm 0;
}

.leftNavbarButtons {
    /*border: 1px solid green;*/
    display: inline-flex;
    color: white;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 0.25cm 0 0.25cm;
    padding: 0 0.25cm 0 0.25cm;
}

.leftNavbarButtons:hover {
    color: #c2c2c2;
    cursor: pointer;
}

#donateButton {
    position: absolute;
    right: 2mm;
    top: 2mm;
    height: 1.1cm;
    width: 5cm;
    background: red;
    border: none;
    outline: none;
    color: white;
    font-size: 0.5cm;
    border-radius: 5px;
}

#donateButton:hover {
    cursor: pointer;
}

.navbarSocialMediaImage {
    /*border: 1px solid green;*/
    width: 0.6cm;
    height: 0.6cm;
    margin: 0 0.25cm 0 0.25cm;
}

#navbarSocialMediaImageWrapper {
    /*border: 1px solid red;*/
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 6cm;
    top: 0mm;
}

.navbarSocialMediaImage:hover {
    cursor: pointer;
}

/*--------------------------------HOMEPAGE--------------------------------*/

/* ------------------------------ */
/* I changed this part of code */
/* ------------------------------ */
#homePageTopImageWrapper {
    border: 3px solid green;
    background: brown;
    height: calc(100vh - 58px);
    /*position: absolute;*/
    display: flex;
    /*top: 58px;*/
    width: 100%;
    /*height: calc(100% - 1.5cm);*/
    justify-content: center;
    align-items: center;
    /*overflow: hidden;*/
}

#homePageTopImageWrapper img {
    height: 100%;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div id = "navbarWrapper">

    <!--________Navigation Buttons________-->
    <div id = "leftNavbarButtonWrapper">
        <div  onclick="location.href='./ourMission_desktop.html'">Our Mission</div>
        <div  onclick="location.href='./team_desktop.html'">Team</div>
        <div  onclick="location.href='./services_desktop.html'">Services</div>
        <div  onclick="location.href='./contactUs_desktop.html'">Contact Us</div>
    </div>

    <!--________Social Media Buttons________-->
    <div id="navbarSocialMediaImageWrapper">
        <img class = "navbarSocialMediaImage" src="../images/facebook_logo_white.png" alt="Facebook logo/link" onclick="window.open('<link path>', '_blank')">
        <img class = "navbarSocialMediaImage" src="../images/twitter_logo_white.png" alt="Twitter logo/link" onclick="window.open('<link path>', '_blank')">
        <img class = "navbarSocialMediaImage" src="../images/instagram_logo_white.png" alt="Instagram logo/link" onclick="window.open('<link path>', '_blank')">
    </div>

    <!--________Donate Button________-->
    <button id = "donateButton" onclick="window.open('<link path>', '_blank')">Donate Now</button>
</div>


<!--__________________________HOMEPAGE CONTENT__________________________-->

<!--________Top Homepage Image________-->
<div id = "homePageTopImageWrapper">
    <img src = "img1.png"> <!-- your imag url -->
</div>


</body>
</html>

I used calc() function of CSS and also used vh unit to do that.

CodePudding user response：

I don't see a difference in the height or overall size of the navbar between any of the browsers. What I would do instead of letting Javascript do the work is use sizing with CSS and the Height: exampleHeight; and combine it with box-sizing: border-box; which will include the padding in the overall height of the navbar.