ben03 Posted February 21, 2020 Share Posted February 21, 2020 Hi there, I am trying to check whether a div overlaps the browser height using getBoundingClientRect().height and comparing it to window.innerHeight: css #container { min-height: 100vh } JS document.addEventListener("DOMContentLoaded", function() { let landingScreen = document.getElementById('container') let getHeight = window.innerHeight let landingHeight = landingScreen.getBoundingClientRect().height if (landingHeight <= getHeight) { do this } else { do that } } However this doesn't seem to always return accurate results. sometimes it considers the div to be the height of the window, even when content is clearly overlapping. Is there a more robust way of achieving this? Thanks Link to comment Share on other sites More sharing options...
niche Posted February 21, 2020 Share Posted February 21, 2020 Best to use your developer tools. That way you can actually see what you're dealing with. Link to comment Share on other sites More sharing options...
ben03 Posted February 21, 2020 Author Share Posted February 21, 2020 Printing to the console shows the div and browser height as the same, despite some of the content of the div spilling out of view. It is almost like it is treating min-height as max-height. Are there possibly some compatibility issues with using 100vh and javascript getBoundingClientRect()? Link to comment Share on other sites More sharing options...
Ingolme Posted February 23, 2020 Share Posted February 23, 2020 I suspect some margins may be escaping the container. The quick solution to that would be to add overflow: hidden to #container. Another possibility is that images are changing the height of the container. Since DOMContentLoaded usually fires before images have loaded, the images are not adding to the height of the container at the time that the event fired. Link to comment Share on other sites More sharing options...
ben03 Posted February 25, 2020 Author Share Posted February 25, 2020 Thanks Ingolme, images could well be the problem here. What would be better to use than DOMContentLoaded in this instance? Link to comment Share on other sites More sharing options...
Ingolme Posted February 26, 2020 Share Posted February 26, 2020 Just the "load" event. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now