[SOLUCIONADO] web sin scroll

dw14 · #1 (**permalink**) 10/06/2013, 04:24

Hola,

Estoy haciendo una web que me ha encargado un amigo y me encuentro con una duda.

Quiere que la web no haga scroll. Supongo que una solución sería usar la propiedad height y poner un valor "bajo" para que en todas las resoluciones se solucione el problema, pero la web ya la tengo casi terminada (esto me lo dijo hace poco) y no me convence lo de poner un valor en px ya que he hecho todo o casi todo en porcentajes.

Entonces, hay alguna manera de que la web siempre se ajuste al alto del navegador, sea cual sea la resolución?

pzin · #2 (**permalink**) 10/06/2013, 04:32

Podrías hacer algo así:

Código CSS:

Ver originalhtml, body {
  height: 100%;
}
 
body {
  overflow: hidden;
}

Pero ocultaría también todo el contenido que sobrepase del viewport. Dependerá cómo hayas hecho el sitio te puede servir o no.

tonigomila1988 · #3 (**permalink**) 10/06/2013, 10:37

Es muy difícil hacer una web sin scroll debido a la cantidad de resoluciones de los distintos dispositivos, ya que en una resolución se puede ver muy bien la página pero en otra ya aparece el scroll.

dw14 · #4 (**permalink**) 13/06/2013, 09:18

Hola!!

Perdón por no haber respondido antes, estuve muy liado.
Aún no he probado la solución que me dio pzin, esta noche cuando llegue a acasa lo intento y os cuento.

Se de la dificultad de que se ajuste a la venta del navegador, pero es una web que no tiene mucho contenido. Os explico cómo es la estructura de la web, para ver si se os ocurre algo.

La estructura del HTML sería esta

Código HTML:

<body>
<wrapper>
<header>
</header>
<section> 
[contenido]
</section>
<section>
 [menú a pie de pagina]
</wrapper>
<footer>
</foorter>
</body>

La etiqueta wrapper contiene toda la web. En la parte de abajo de este contenedor estaría un menú justo encima del pie de pagina. La idea es que este menú siempre esté visible, encima del final de la ventana. Entonces, mi pregunta es si habría alguna manera de ajustar el contenido (el tamaño) al alto del navegador de alguna forma parecida a como se ajusta con mediaqueries al ancho.

buzu · #5 (**permalink**) 13/06/2013, 17:19

Si el height: 100% no hace lo que quieres, entonces puede probar con Javascript. Lo que tendrias que hacer es obtener la altura de la ventana y ajustar la altura de tu documento segun se requiera. Hay que estar atentos a tomar la altura del viewport y no de la ventana del navegador ya que la ventana del navegador incluye menus, y barras de herramientas.

dw14 · #6 (**permalink**) 15/06/2013, 04:47

Cita:

Iniciado por buzu

Si el height: 100% no hace lo que quieres, entonces puede probar con Javascript. Lo que tendrias que hacer es obtener la altura de la ventana y ajustar la altura de tu documento segun se requiera. Hay que estar atentos a tomar la altura del viewport y no de la ventana del navegador ya que la ventana del navegador incluye menus, y barras de herramientas.

No tengo mucha experiencia con javascript...pero he encontrado un plugin jquery por la web. Se llama response.js. No se si lo conoceis. Me servirá para lo que quiero hacer?

pzin · #7 (**permalink**) 15/06/2013, 04:54

El problema no es evitar el scroll, con la solución en #2 te servirá perfectamente.

El problema lo tienes luego en el contenido, para que no sobrepase la parte visible de la web, ya que sino hay scroll y sobrepasa, no se verá.

Es bastante complejo hacer para absolutamente todas las resoluciones, a priori, porque ahí estás incluyendo móviles y demás pantallas pequeñas.

buzu · #8 (**permalink**) 15/06/2013, 15:34

No conozco el plugin, pero por el nombre parece se que es para hacer web con responsive design. Quiza me equivoque, pero si es para eso, entonces yo recomiendo usar CSS puro, los dispositivos que uno tiene en la mira cuando hace responsive design ya soportan las caracteristicas de CSS que permite ese tipo de estructura.

En cuanto a aquello de considerar todas la resoluciones a priori, es muy cierto, por eso el dise~o responsivo no se basa en resoluciones de dispositivos, sino en medidas en pixeles. De esta manera es muy sencillo lograr que el contenido se ajuste al contenedor.

Por otro lado, nunca he entendido esa necesidad que la gente tiene de quitar los scrolls. Scrolls son una maravilla de usabilidad (esto no se lo tomen muy enserio) y qerer deshacerce de ellos simplemente no tiene sentido, pero bueno, siempre hay a quien le gusta complicarnos la vida XD

twilvaro · #9 (**permalink**) 15/06/2013, 20:22

La solución de pzin es completamente funcional. Luego, simplemente fija el menú y añade anclas a los enlaces. Aun sin barras de desplazamiento, al hacer click en cada ítem de la navegación se desplazará al apartado de la web indicado. Con esto, tampoco hay absolutamente ningún problema en hacerla responsive. Sería como desarrollar cualquier otra One-Page responsive. Eso sí, añade "height: 100%; overflow: hidden;" al contenedor cuando acabes de desarrollarla, para trabajar el prototipado cómodamente.

Aquí te dejo un ejemplo funcional: http://jsfiddle.net/twilvaro/VhegM/.

¿JavaScript? Para la función en sí no lo veo necesario. En el ejemplo sí que utilizo un plugin JS (desarrollado con la librería jQuery) para que el desplazamiento sea suave. Se llama SmoothScroll.js.

Otra cosa. Si lo que quieres es que cada bloque de contenido (para entendernos, cada div en el ejemplo) tenga el mismo alto que la del navegador (o la resolución del dispositivo en el que se vea), existe una nueva medida llamada Viewport's units. Puedes modificar el "height: 600px" que le doy en el ejemplo a los divs por "height: 100vh". Esto hará que no sólo sea el contenedor el que ocupe el 100% del alto de la pantalla, sino que cada sección también ocupará exactamente el alto del dispositivo con el que se vea. Eso sí, ojo con las compatibilidades: http://caniuse.com/#search=vh. Hay un polyfill de la genia Lea Verou, pero no lo he probado ni leído mucho sobre él, así que no te puedo asegurar que funcione totalmente: https://gist.github.com/LeaVerou/1347501.

Un saludo!

dw14 · #10 (**permalink**) 25/06/2013, 03:46

Gracias a todos por las respuestas. Solucioné el problema de la forma que dice pzin, aunque tuve que lidiar con el resto de elementos para que se ajustasen solo al tamaño de ventana.

Gracias