I am currently in the process of designing a straightforward website layout that includes a navigation bar at the top. The main focus is on an image that needs to stretch from the bottom of the navbar to the bottom of the window, filling up the entire screen without any scrollbars. To achieve this, I have placed the image within a wrapper div and set it to cut off any overflow. My concern lies with the sizing of this div. While everything looks correct in Chrome and Edge browsers, Firefox is displaying the issue where the div does not extend to the bottom of the page. Here are screenshots of how the layout appears in each browser. For visibility purposes, I have replaced the image with a brown background in the wrapper div.
https://i.sstatic.net/g11I5.pngAppearance on Chrome
https://i.sstatic.net/VjcGm.pngAppearance on Edge
https://i.sstatic.net/qBGhX.pngAppearance on Firefox
Below is the JavaScript snippet I am using to set the height of the div:
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);
To address the Firefox display issue, I've added an event listener in JavaScript to ensure all DOM content has loaded before calculating the correct height for the wrapper div. This height adjustment considers various factors such as the available screen height, the height of the navbar (58px), and the browser toolbar height. Additionally, the setInterval function ensures immediate resizing if the user triggers certain browser actions.
Here's the relevant HTML code snippet:
<!--__________________________NAVIGATION BAR__________________________-->
<div id="navbarWrapper">
<!--________Navigation Buttons________-->
<div id="leftNavbarButtonWrapper">
<div class="leftNavbarButtons" onclick="location.href='./ourMission_desktop.html'">Our Mission</div>
<div class="leftNavbarButtons" onclick="location.href='./team_desktop.html'">Team</div>
<div class="leftNavbarButtons" onclick="location.href='./services_desktop.html'">Services</div>
<div class="leftNavbarButtons" 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>
Lastly, here is the CSS styling being utilized:
/*--------------------------------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;
}
/* Styling rules for navigation elements continue... */
If there are any insights or suggestions on why this setup functions correctly in Chrome and Edge but experiences issues in Firefox, your input would be greatly appreciated. Thank you.