JQuery: altura dinámica() con el cambio de tamaño de la ventana()

Estoy teniendo un problema idéntico a este cartel: Jquery problem with height() and resize()JQuery: altura dinámica() con el cambio de tamaño de la ventana()

Pero la solución no soluciona mi problema. Tengo tres divs apilados, y quiero usar JQuery para hacer que el del medio se ajuste en altura al 100% de la altura de la ventana, menos la altura (23px * 2) del otro & inferior divs superior. Funciona en el cambio de tamaño, pero está apagado (corto) por 16px cuando el documento se carga inicialmente.

HTML

<body> 
<div id="bg1" class="bg">top</div> 
<div id="content"> 
    help me. seriously. 
</div> 
<div id="bg2" class="bg">bottom</div> 
</body>

CSS

html, 
body { 
    width:100%; 
    height:100%; 
} 

.bg { 
width:315px; 
height:23px; 
margin:0 auto; 
text-indent:-9000px; 
} 

#bg1 {background:url(../images/bg1.png) 0 50% no-repeat;} 
#bg2 {background:url(../images/bg2.png) 0 50% no-repeat;} 

#content { 
width:450px; 
margin:0 auto; 
text-align: center; 
}

jQuery

$(document).ready(function(){ 
    resizeContent(); 

    $(window).resize(function() { 
     resizeContent(); 
    }); 
}); 

function resizeContent() { 
    $height = $(window).height() - 46; 
    $('body div#content').height($height); 
}

Fuente

2011-11-15 Gregir

¿Estás buscando algo como esto? ¿O debería el pie de página moverse con la página? http://www.cssplay.co.uk/layouts/basics2.html ¡Un violín sería bueno! – mrtsherman

Podría hacer algo así, pero estoy atascado con el HTML que se generará en el servidor. Me han pedido que resuelva este tipo de problema con JQuery. – Gregir

¿Qué pasa con la sangría de texto 9000px? – mrtsherman

Siento que no debería haber una solución de javascript, pero ¿cómo es esto?

http://jsfiddle.net/NfmX3/2/

$(window).resize(function() { 
    $('#content').height($(window).height() - 46); 
}); 

$(window).trigger('resize');

Fuente

2011-11-15 03:19:05 mrtsherman

En realidad, puede hacerlo en una sola línea. ¡Incluso más corto! – mrtsherman

Eso hizo el truco, por extraño que parezca. Gracias. – Gregir

https://jsfiddle.net/53hoq9w7/ – Pierre

Para ver la altura de la ventana, mientras que (o después) de que se cambia el tamaño, probarlo:

$(window).resize(function() { 
$('body').prepend('<div>' + $(window).height() - 46 + '</div>'); 
});

Fuente

2011-11-15 03:11:45 SuSanda

bien, ¿qué tal una respuesta CSS! Usamos display: table. Entonces cada uno de los divs son filas, y finalmente aplicamos una altura del 100% a la 'fila' y voilà del medio.

http://jsfiddle.net/NfmX3/3/

body { display: table; } 
div { display: table-row; } 
#content { 
    width:450px; 
    margin:0 auto; 
    text-align: center; 
    background-color: blue; 
    color: white; 
    height: 100%; 
}

Fuente

2011-11-15 03:28:50 mrtsherman

Hombre! ¡Sabía que había una única solución de CSS! Me has inspirado Chicos, prefieren esta solución que no es JS antes que cualquier JS. No es tan limpio y es posible que necesite usar un margen extra, pero aún así vale la pena. –

¿Por qué la gente piensa que CSS siempre es mejor que JS? – barell

@barell No siempre es mejor, pero en lo que respecta a la presentación, generalmente es preferible usar el estilo solo, en lugar de implementar el comportamiento/lógica también. Un beneficio adicional es que CSS es resistente por diseño, mientras que JavaScript es frágil por diseño. –

La solución más limpia - también puramente CSS - sería utilizar Calc y vh.

Altura de la div media se calculará así:

#middle-div { 
height: calc(100vh - 46px); 
}

Es decir, el 100% de la altura de la ventana gráfica, menos el 2 * 23 píxeles. Esto asegurará que la página se cargue correctamente y sea dinámica (demo here).

Recuerde también utilizar el tamaño de la caja, por lo que los bordes y las juntas no hacen que los divs llenen la ventana gráfica.

Fuente

2016-11-21 20:39:25

Prácticamente todos los navegadores actuales son compatibles con calc (aquí: http://caniuse.com/#feat=calc) y lo mismo para vh (aquí: http://caniuse.com/#feat=viewport-units) –

JQuery: altura dinámica() con el cambio de tamaño de la ventana()

Respuesta

Cuestiones relacionadas