Problema con height 100% y jquery

[andreuos]

Hola compañeros!
Estoy desarrollado una pequeña web muy sencilla con divs e imágenes. Estoy trabajando con medidas en % para que se adapte a cualquier pantalla, el problema que tenía hasta ahora es que al re-dimensionar la ventana solo el ancho (width) de los elementos era actualizado, el height seguía igual, pude comprobar que era un problema muy común y he encontrado varios scripts para jquery que es lo que estoy utilizando para solucionar el problema. Ahora el problema que tengo es que el código que tengo crea algún tipo de incompatibilidad con estos scripts y no lo entiendo porque mi código es muy básico. La función stretchScreen es la que obliga a redimencionar el alto de todos los elementos, pero en el momento que pongo las primeras 6 líneas deja de funcionar el script, aunque estas primeras líneas siguen funcionando.
Aquí va el código:

$(function() {

$( "#tabs" ).tabs();

});


$(function() {
$( "#selectable" ).selectable();
});

function stretchScreen ()
{
var dheight = $('html').height();
var wheight = $(window).height();
//height first header, content, last footer
var overTop = $('div[data-role="page"]:first-child div[data-role="header"]:first-child').height();
var cbody = $('div[data-role="page"]:first-child div[data-role="content"]:first-child').height();
var overBottom = $('div[data-role="page"]:first-child div[data-role="footer"]:last-child').height();
//correction
var correct = overTop + overBottom;

if (cbody < dheight || cbody < wheight)
{
changePush ();
}

if (wheight > dheight)
{
$('.b_menuContent').height(cheight);
}
//add orientationchange
$(window).bind('resize orientationchange', function()
{
wheight = $(window).height();
noscroll();
changepush();
});
function noscroll()
{
if (wheight > dheight)
{
$('html').addClass('noscroll');
} else if (wheight <= dheight)
{
$('html').removeClass('noscroll');
} else {}
}

function changepush()
{
if (wheight > dheight)
{
$('div[data-role="content"]:first-child').css({'min-height' : wheight-correct+'px'});
$.mobile.silentScroll(0);
} else {
$('div[data-role="content"]:first-child').css({'min-height' : dheight-correct+'px'});
$.mobile.silentScroll(0);
}
}
}


Gracias de antemano!

[Middrel]

Puedes redimensionar tus imagenes con CSS.

Por ejemplo, yo hago lo siguiente:

Código HTML:

<div id="estilo">
    <img src="tuimagen.jpg" alt="" class="estilo-imagen" />
</div> 

y tus estilos podrían quedar así:

Código CSS:

#estilo{
      width:20%; }
 
.estilo-imagen{
      width:100%; }
 

Con esto, tu div se ajustará al 20% de la resolución y así puedes acomodar más divs con el 80% restante y tu imágen siempre tomará el 100% del div donde este colocada. Es decir, la imagen se ajustará al tamaño que tome el div acorde a tu resolución. Con esto te evitas el script de JQuery.

Bueno, así lo hago y me funciona bien, veamos que comentan los demás. Suerte!

[pablogalvan]

Si es una web muy sencilla yo no meteria jquery, a veces tiene bugs de seguridad en ciertas funciones y carga muchisimo el código de cara al posicionamiento.

Es muy buena solucion para webs complejas con plugins y componentes que lo usen mucho, pero siendo sencilla me parece mejor la solucion que te han ofrecido.

Por otra parte en cuanto a resolucion lo suyo es diseñar la web para que se vea bien en las resoluciones mas comunes y para moviles, es complicado muchas veces (depende del contenido) que todas las páginas esten perfectas en todas las resoluciones posibles