javascript - jquery redimensionar para que el contenido siempre esté perfectamente centrado

Tengo lo siguiente ahora mismo, pero no es perfecto:

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

Básicamente, tengo 75px desde la parte superior antes de que comience mi contenido, y tengo 60px desde la parte inferior de la página hasta mi contenido.

¿Cómo hago para que cuando cambie el tamaño de la ventana, siempre respete esas dimensiones? Estoy usando la barra de desplazamiento malihu y estoy cargando mi vista en #app-views.

Tengo un borde alrededor de toda la ventana (10px), una barra de navegación (50px) y 15px de relleno hasta mi cuerpo. Luego, tengo 15px de relleno inferior en el cuerpo, un pie de página de altura 35px y un borde inferior de 10px.

Aquí está el HTML básico:

Respuesta #1

Si quieres que tus contenidos se coloquen y redimensionen manteniendo la misma distancia desde la parte superior y la parte inferior de la ventana, no tienes que usar jQuery o Javascript. Solo CSS haría el truco. Prueba esto sin el atributo height en tu código de estilo:

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

Puedes configurar left y right sin width para obtener el mismo efecto en la dimensión horizontal.

Respuesta #2

Dices que tienes medidas específicas para colocar tu contenido en la página

(75px desde la parte superior antes de que comience mi contenido, y tengo 60px desde la parte inferior de la página)

Bueno, con el offset de jQuery puedes obtener la posición superior del elemento y también puedes actualizar la posición superior de CSS al cambiar el tamaño de la pantalla para que tu contenido siempre ajuste su posición al redimensionar.

Para ver dónde está la parte inferior de tu elemento de contenido, podrías encontrar el desplazamiento de la parte superior del contenido y sumar la altura del contenido para obtener la posición inferior del contenido en relación con la parte superior de la página.