jquery resize so content is always centered perfectly

Question

I have the following right now, but its not perfect:

$(window).resize(function () {
    $("#app-views").height($(window).height() - 140);
});

Basically, I have 75px from top before my content starts, and I have 60px from bottom of the page to my content.

How do I make it so when I resize the window, it will always respect those dimensions? I am using malihu scroll bar, and I am loading my view into #app-views.

I have a border all around the window (10px), a navbar (50px), and 15px of padding until my body. Then, I have 15px bottom padding on body, a footer of height 35px, and 10 px bottom border.

Here is the basic HTML:

Answer 1

If you want your contents to be placed and resized while keeping the same distance from the top and the bottom of the window, you don't have to use jQuery or Javascript. Only CSS would do the trick. Try this without height attribute in your style code:

#app-views {
    position: fixed;
    top: 75px;
    bottom: 60px
}

You can set left and right without width to get the same effect in horizontal dimension.

Answer 2

You say you have specific measurements to place your content on the page

(75px from top before my content starts, and I have 60px from bottom of the page)

Well with jQuery offset you can get the top position of the element and you can also update the css top position on screen resize so that your content will always adjust its position on resize.

To see where the bottom of your content element is you could find the offset of the top of the content and add the content's height to get the bottom position of the content relative to the top of the page.

Answer 3

I would recommend doing this in CSS, perhaps by dynamically changing the jQuery object's CSS property. I would attend to it with a simple CSS selector. This works even when the window is resized. Have a look:

#app-views {
    position: absolute; /*this will allow you to position it exactly where you want it*/
    left: 50%; /*this will move the left side of the container halfway across the page*/
    transform: translateX(-50%); /*moves the container left by half its width,
    so that the centre of the container aligns with the center of the page*/

}

You can adjust the vertical position with the 'top' property and 'translateY()' in a similar way I demonstrated with transform and translateX().

If you want to use jQuery, you could try:

#('app-views').css('position', 'top'); 

Furthermore, I would also suggest that you do not maintain the 75px at the top of your page for all kinds of screen sizes. 75px may be suitable for a desktop but not for a mobile. If you do intend to make your website fully support mobile, it is often a good idea to design the mobile layout first, as it tends to by simpler. Then, you can use media queries to adjust it for the desktop. It really does work brilliantly. I've used it myself many times before. You can learn more about that here:

MediaQuery CSS