Have you ever encountered a situation where your site has too little content, no data yet? Did Footer dangle in the middle of the screen like this?
I divided the layout into 3 components: Header, Main, and Footer
turbolinks: load: Recall this function whenever reloading pages, turning pages
var h_screen = $(window).height();
$ (window) .height (); The function takes the height of the working screen
This is the function that takes the height of the “header” class. Different from the .height () method, outerHeight () method; will take the height that we have padding or margin.
The .height method has params to set the height for certain elements, here is the “main” class.
And here is the result:
My post here is over, have fun!