Hola a todos, resulta que tengo que crear un diseño liquido de una web. Para empezar debo mostrar una imagen grande y debajo un menu y un footer. Con el siguiente codigo busco generar este diseño adaptable a cualquier resolucion. El problema es que en 800*600 se ve bien ( NO genera el scroll ni ver ni horiz), pero en resoluciones mayores ( la mia es 1300*800) se genera un scroll vertical donde la imagen ocupa todo el 100% de alto y debajo quedan los demas elementos. Alguien me puede indicar como hacer para que nunca se genere scroll PERO siempre manteniendo los elementros dentro. Este es el codigo: (Por favor no me digan que con overflow:hidden, ya que lo unico que hace es NO GENERAR SCROLL pero esconde los demas elementos.)
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> body{
padding:0;
margin:0;
}
img{
width:100%;
height:100%;
}
.all{
width:95%;
height:80%;
margin:auto;
}
.imagen{
width:100%;
height:60%;
padding:0;
margin:auto;
}
.menu{
width:100%;
height:10%;
}
.footer{
width:100%;
height:10%;
}
<div class="imagen"><img src="imagen.png" /></div>}
<div class="menu">sdfdsf
</div> <div class="footer">footer
</div>
He intentado colocando las medidas dentro del IMG pero igual pasa lo mismo.