Automatically push the bottom Footer down in Javascript in Rails

Tram Ho

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?

You wrote the javascript file to push it down, but your javascript file doesn’t automatically load when you move the page, and only works when you F5. Or, you fix it a lack of professionalism by writing css for each page, using padding or margin. This way, you will have to write each page, and only work well when your data never changes. Today I will show you how I fix this error (I use Javascript, and web in Rails!)

I divided the layout into 3 components: Header, Main, and Footer

As the two illustrations above, the main component has yield content of the home page and about page. The content of these two pages is small so Footer is currently ugly. Now I javascript to handle this error.

You make the web so you should know through javascript, and to fix this error we just need to write a simple javascript file. For cases where Footer is in the middle of the screen, we will find a way to push the Footer down to the bottom of the screen. So the idea is: Screen height (H_s) = Height Header (H_h) + Main height (H_m) + Footer height (H_f), so we just need to check H_m is less than H_s – ( H_h + H_f) or not, if yes, then set the height to this component. Javascript has provided us with the function to get component height, so now let’s start writing js file.

turbolinks: load: Recall this function whenever reloading pages, turning pages

$ (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!

Share the news now

Source : Viblo