Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » div adaptado pantalla

JavaScript - div adaptado pantalla

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

div adaptado pantalla

Publicado por Jecht (9 intervenciones) el 07/12/2014 14:02:08
Buenas tardes,

Necesítaria saber de que forma puedo adaptar un contenedor a casi todo el alto de la pagina, es decir, en mi caso tengo un <div> situado en el top de la pagina con unos parametros i debajo de este, otro <div> que quiero que sea dinamico según la resolución de la pantalla, es decir, que empiece justo debajo del primer <div>, pero que el height i weight se adapten al espacio restante. He provado con availWidth i availHeight sin resultado.

Muchas gracias de antemano
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

div adaptado pantalla

Publicado por Vainas (258 intervenciones) el 07/12/2014 17:45:44
Buenas:

Puedes probar con (te recomendarias que buscases pros y contras):

1
2
document.documentElement.clientWidth
document.documentElement.clientHeight


o:

1
2
window.innerWidth
window.innerHeight


Con esto obtienes el ancho del viewport que es en donde si dibuja tu html en el navegador.

Tambien puedes usar jQuery(window).width() si usas jquery.

De todas formas (no se que tienes pensado hacer) pero no se si podria servirte algo asi:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<style type="text/css">
html,body{
    height: 100%;
}
#content{

    width: 50%;
    height: 50%;
    background-color: navy;
    font-size: 30px;
    color: yellow;
}
#top{

	background-color: yellow;
	width: 50%;
    height: 10px;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="content">lorem</div>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar