unkn0wn unkn0wn - 1 month ago 5
CSS Question

Calling a function after dynamic content is loaded

My main objective is to place a footer which stays at bottom. My footer code is working fine if content height exceeds the screen height but when a page with less content arrives, it shows a huge gap between footer and screen bottom. So i am dynamically getting the content height and then placing it afterwards.

$(window).on('load', function() {
console.log(window.innerHeight);
console.log($(".content").height());
alert("hi");

if((window.innerHeight - $(".content").height()) < 70 ) $("footer").css({"position": "absolute", "top": window.innerHeight-90});
});


If is use this code in google chrome console after page is loaded, it works perfectly, but when placed in code,
$(".content").height()
is giving a constant value.

Answer

You don't need to do this with JS.

You can do this in css using flex-box and forcing the min-height to always fill the viewport with the vh unit.

.Site {
  margin: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

header { background-color: lime; }

footer { background-color: red; }
<body class="Site">
  <header>header content</header>
  <main class="Site-content">site content</main>
  <footer>footer content</footer>
</body>

Comments