Foros del Web » Creando para Internet » CSS »

Overflow y height

Estas en el tema de Overflow y height en el foro de CSS en Foros del Web. Hola a todos, tengo un problemilla bastante importante. Digamos que, en el desarrollo de una aplicación para crear blogs, tengo algo así: La capa del ...
  #1 (permalink)  
Antiguo 01/12/2010, 15:58
Avatar de 3nr1c  
Fecha de Ingreso: septiembre-2010
Ubicación: Barcelona
Mensajes: 407
Antigüedad: 7 años, 3 meses
Puntos: 50
Overflow y height

Hola a todos, tengo un problemilla bastante importante. Digamos que, en el desarrollo de una aplicación para crear blogs, tengo algo así:



La capa del menú (a la izquierda) y la de las entradas están flotando (float), y la contenedora tiene un overflow:auto. Lo que yo quisiera es conseguir que el blanco siempre llegue hasta abajo del todo, si importar el numero de entradas, ya que con overflow es variable y si le pongo un height:100% (sin poner overflow), sólo se ve blanco hasta donde acaba la pantalla, si haces scroll ya no se ve.

Cómo puedo hacer para ver un fondo blanco a pantalla completa, manteniendo los márgenes grises?

Gracias de antemano
__________________
Tu duda está explicada aquí →→Mi blog de JavaScript, HTML5, CSS3 y PHP

+1 si te sirvió mi respuesta ;-) (y ya de paso visita el blog ▲↑)
  #2 (permalink)  
Antiguo 01/12/2010, 16:38
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Overflow y height

si no mal recuerdo eso se solventa con

Código CSS:
Ver original
  1. html,body{height:100%;}
  2. .MenuContent{height:100%;} /*Id o clase del div que necesitas ocupe el 100% de altura*/
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 02/12/2010, 06:30
Avatar de 3nr1c  
Fecha de Ingreso: septiembre-2010
Ubicación: Barcelona
Mensajes: 407
Antigüedad: 7 años, 3 meses
Puntos: 50
Respuesta: Overflow y height

Así funciona... a medias. Si sólo hay dos entradas (como en la imagen), se ve perfecto, un fondo blanco hasta abajo de la pantalla.

Pero... si hay suficientes como para que la página tenga más alto que la pantalla, entonces al hacer scroll el blanco se acaba.

PD: se me ocurre que podría poner una imagen de fondo blanca con 800 px(la anchura) y que tenga un repeat-y. Lo probaré a ver que tal pero, es ésta una buena solución?
__________________
Tu duda está explicada aquí →→Mi blog de JavaScript, HTML5, CSS3 y PHP

+1 si te sirvió mi respuesta ;-) (y ya de paso visita el blog ▲↑)
  #4 (permalink)  
Antiguo 02/12/2010, 07:21
Avatar de punk567  
Fecha de Ingreso: octubre-2006
Ubicación: Montevideo
Mensajes: 265
Antigüedad: 11 años, 2 meses
Puntos: 5
Respuesta: Overflow y height

Hola, a lo mejor esto puede ayudarte

http://www.xs4all.nl/~peterned/examples/csslayout1.html

saludos
  #5 (permalink)  
Antiguo 02/12/2010, 11:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Overflow y height

Esa estructura se conoce como "pie abajo"
Son varios los métodos (css) que se pueden utilizar.
Busque por esa cadena de texto.
Ahora, de memoria, recuerdo sólo dos páginas donde encontrará ejemplos de ello:
www.araudi.net
css.devillasbuenas.es

Y siempre lo podrá mejorar/complementar con las falsas columnas equilibradas.
  #6 (permalink)  
Antiguo 03/12/2010, 08:49
Avatar de 3nr1c  
Fecha de Ingreso: septiembre-2010
Ubicación: Barcelona
Mensajes: 407
Antigüedad: 7 años, 3 meses
Puntos: 50
Respuesta: Overflow y height

He intentado usar esto de aqui. El problema es que tanto el menu como la capa del texto están flotando sobre una contenedora, y entonces no me funciona... Alguna solución?
__________________
Tu duda está explicada aquí →→Mi blog de JavaScript, HTML5, CSS3 y PHP

+1 si te sirvió mi respuesta ;-) (y ya de paso visita el blog ▲↑)
  #7 (permalink)  
Antiguo 03/12/2010, 09:15
Avatar de 3nr1c  
Fecha de Ingreso: septiembre-2010
Ubicación: Barcelona
Mensajes: 407
Antigüedad: 7 años, 3 meses
Puntos: 50
Respuesta: Overflow y height

Solucionado: lo he conseguido con un clear:both en la capa pie y poniendo ésta en la capa contenedora. Un saludo
__________________
Tu duda está explicada aquí →→Mi blog de JavaScript, HTML5, CSS3 y PHP

+1 si te sirvió mi respuesta ;-) (y ya de paso visita el blog ▲↑)
  #8 (permalink)  
Antiguo 03/12/2010, 09:56
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Overflow y height

Las estructuras que le indicaba eran para que le sirviesen de base y a partir de ellas.
Porque en el dibujo que mostró, su estructura no tiene pie ni cabeza, digo, footer and header :D

Tampoco indicaba si habrá situaciones de mayor contenido que hagan aparecer el scroll o si cada lateral llevaría un fondo distinto y por lo tanto habría que añadir una estructura de "falsas columnas" o "columnas equilibradas".

Bien, una variación del ejemplo que enlaza, con dos cajas flotadas, contemplando que puedan crecer en contenido y que éste no desborde por abajo al div padre de los flotados sería algo como:
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <style type="text/css">
  6. * {margin:0; padding:0; outline: none; position: relative;}
  7. html, body {
  8.   height: 100%;
  9.   background: #000; /*sólo a efectos visuales*/
  10.   font-size: 1em;
  11. }
  12. #contenedor {
  13.   min-height: 100%;
  14.   height: auto !important;
  15.   height: 100%;
  16.   margin: 0 auto;
  17.   background: #EEDCB4;/*sólo a efectos visuales*/
  18.   width: 70%;/*sólo a efectos visuales*/
  19.   overflow:auto;
  20. }
  21. .izquierda {
  22.   float:left;
  23.   width: 30%;
  24.   margin: 10px 0 10px 5%;
  25. }
  26. .derecha {
  27.   float: left;
  28.   width: 55%;
  29.   margin: 10px 5%;
  30.   }
  31. a {
  32.   text-decoration: none;
  33.   color: #444;
  34. }
  35. a span {display: none;}
  36. a:focus span, a:active span {
  37. display: block;
  38. text-align: justify;
  39. color: #444;
  40. }
  41. </head>
  42.   <div id="contenedor">
  43.       <div class="izquierda">
  44.           <p><a class="mas" href="#">Pulsa para añadir contenido y ver el comportamiento:<br /><span>Lorem ipsum dolor sit amet consectetuer ut Curabitur malesuada vel cursus. Ut ipsum Pellentesque a eget platea eget eget quam ac quis. At id ut condimentum risus vitae pharetra malesuada Ut eu pede. Sed lorem orci elit magna ut ante Curabitur Curabitur orci et. Et Pellentesque Morbi Quisque urna feugiat leo Vestibulum.<br />
  45.           Nam est Suspendisse wisi facilisi Curabitur Mauris turpis laoreet laoreet cursus. Et vitae quam et sed Curabitur ut pede ipsum vitae id. Et aliquet ac In dapibus sodales nec Fusce turpis eget hac. Fringilla pede Vestibulum Curabitur enim eu orci ac In vitae urna. Vel in laoreet Maecenas volutpat pretium congue parturient augue et libero. Quis.<br />
  46.           Enim fermentum sit augue In a ultrices scelerisque accumsan pede eget. Id sapien nec mauris metus sem in Aenean natoque urna semper. Hac libero condimentum Aenean odio justo montes dis pede orci libero. Ornare vitae Aenean In turpis Morbi dictum Morbi id semper Suspendisse. Urna pellentesque semper interdum rutrum consequat at Nulla dui malesuada metus. Nisl.</span></a></p>
  47.       </div>
  48.       <div class="derecha">
  49.           <p><a class="mas" href="#">Pulsa para añadir contenido y ver el comportamiento:<br /><span>Lorem ipsum dolor sit amet consectetuer ut Curabitur malesuada vel cursus. Ut ipsum Pellentesque a eget platea eget eget quam ac quis. At id ut condimentum risus vitae pharetra malesuada Ut eu pede. Sed lorem orci elit magna ut ante Curabitur Curabitur orci et. Et Pellentesque Morbi Quisque urna feugiat leo Vestibulum.
  50.           <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  51.           Lorem ipsum dolor sit amet consectetuer ut Curabitur malesuada vel cursus. Ut ipsum Pellentesque a eget platea eget eget quam ac quis. At id ut condimentum risus vitae pharetra malesuada Ut eu pede. Sed lorem orci elit magna ut ante Curabitur Curabitur orci et. Et Pellentesque Morbi Quisque urna feugiat leo Vestibulum.<br />
  52.           Enim fermentum sit augue In a ultrices scelerisque accumsan pede eget. Id sapien nec mauris metus sem in Aenean natoque urna semper. Hac libero condimentum Aenean odio justo montes dis pede orci libero. Ornare vitae Aenean In turpis Morbi dictum Morbi id semper Suspendisse. Urna pellentesque semper interdum rutrum consequat at Nulla dui malesuada metus. Nisl.</span></a></p>
  53.       </div>
  54.   </div>
  55. </body>
  56. </html>
Supongo que muy parecido a lo que ya ha llegado

Etiquetas: height, overflow
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:33.