Como ajustar Altura a tamaño de la pantalla

[backbit]

Hola amigos, llevo dos meses aprendiendo por aquí y hoy he decidido registrarme ya que no he sido capaz de encontrar solución a mi problema.

A ver si me dan algo de luz, quiero conseguir que cuando entre en mi web la parte visible sea la misma en todas las resoluciones, incluyendo versión para dispositivos móviles.

Ilustro con una imagen por si no me he explicado bien.




Gracias!

[pzin]

Bienvenido al foro.

¿Te refieres a que no exista scroll? ¿A que todo se adapte al tamaño de la pantalla y no haya nada que salga de la parte visible?

[backbit]

No, a ver si soy capaz de explicarme bien.

Quiero que cuando entre una persona a mi web, sea la resolución que sea, lo vea exactamente igual.

Cuando entremos que siempre se vea esta misma pantalla (en mi caso es un logotipo + menu ).



Debajo del logotipo y del menú, haciendo scroll habría más contenido

[pzin]

Ok ahora si entendí.

Pues dependerá un poco como lo tengas hecho, el código que tengas. ¿Puedes postearlo? Usa highlight para envolverlo.

Lo muevo a CSS que seguramente quedará mejor ahí.

[huzban]

Quizas utilizando % en vez de valores fijos
O utilizando los media queries de css para adaptar a las diferntes resoluciones. estos aplican un css distinto a cada resolucion que se le indique.
te dejo un link sobre el @media
http://webdesignerwall.com/tutorials/css3-media-queries
http://www.w3schools.com/css/css_mediatypes.asp

[backbit]

Gracias, voy a intentarlo con @media-queries, pero al existir tantas resoluciones en dispositivos móviles va a ser difícil, si alguien da más información, le estaría muy agradecido :)

[catucux]

Para que se vea en todos los dispositivos asi como tus imagenes debes modificar el css.

Código CSS:

html, body{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 auto;
}
div{
    width: 100%;
}
 

La etiqueta inicial de "html y body" lo que hace es tomar el 100% de la pantalla que se esta utilizando.

La de "div" permite que las capas que coloques ocupen todo el ancho de la pantalla, solo te faltaria configurar el "height" para que tenga una buena visualización.

Es recomendable que utilices dos archivos css uno para pantallas normales y otra para moviles. (es solo un consejo).

Saludos.

[sergiodueso]

A mi me pasa lo mismo y lo de poner al principio html, body {height: 100%}
NO FUNCIONA.

[DragonX]

Código CSS:

.logotipoHolder{
min-height: 40vh;
}
.menuholder{
min-height: 60vh;
 

Con esto lograras que tu header y tu menu ocupen el 100% de alto (uno con 40 y otro con 60) y debajo de eso estaria tu contenido.

Slds.-