bottom - establecer la altura de div usando jquery(altura div estirada)

offset top jquery scroll

Question

Tengo 3 divs con ids header , content y footer . El encabezado y el pie de página tienen una altura fija y están diseñados para flotar en la parte superior e inferior. Quiero que la altura del content medio content calcule automáticamente con jquery. ¿Cómo puedo hacer esto posible?

#header {
    height: 35px;
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 2;
}
#footer {
    height: 35px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    z-index: 2;
}

Gracias de antemano ... :)

blasteralfred

Answer 1

Bueno, puedes hacer esto:

$(function(){

    var $header = $(''#header'');
    var $footer = $(''#footer'');
    var $content = $(''#content'');
    var $window = $(window).on(''resize'', function(){
       var height = $(this).height() - $header.height() + $footer.height();
       $content.height(height);
    }).trigger(''resize''); //on page load

});

ver violín aquí: http://jsfiddle.net/maniator/JVKbR/
demo: http://jsfiddle.net/maniator/JVKbR/show/

Answer 2

La forma correcta de hacerlo es con CSS viejo:

#content{
    width:100%;
    position:absolute;
    top:35px;
    bottom:35px;
}

Y la ventaja es que no necesita adjuntarse al evento window.onresize! Todo se ajustará a medida que el documento vuelva a fluir. ¡Todo por el bajo-bajo precio de cuatro líneas de CSS!

Answer 3

La parte superior de mi cabeza:

$(''#content'').height(
    $(window).height() - $(''#header'').height() - $(''#footer'').height()
);

¿Es eso lo que quieres decir?

Answer 4

Puede vincular la función de la siguiente manera, en lugar de init en carga

$("div").css("height", $(window).height());
$(​window​).bind("resize",function() {
    $("div").css("height", $(window).height());
});​​​​

Answer 5

$(document).ready(function(){ contsize();});
$(window).bind("resize",function(){contsize();});

function contsize()
{
var h = window.innerHeight;
var calculatecontsize = h - 70;/*if header and footer heights= 35 then total 70px*/ 
$(''#content'').css({"height":calculatecontsize + "px"} );
}