Foros del Web » Creando para Internet » CSS »

Div cuya altura crezca con el contenido

Estas en el tema de Div cuya altura crezca con el contenido en el foro de CSS en Foros del Web. Hola a todos. Estoy desarrollando una layout que consta de una cabecera (100px de altura) y tres columnas. De esas 3 columnas, 2 serán de ...
  #1 (permalink)  
Antiguo 22/02/2012, 04:44
 
Fecha de Ingreso: febrero-2012
Mensajes: 2
Antigüedad: 12 años, 1 mes
Puntos: 0
Pregunta Div cuya altura crezca con el contenido

Hola a todos. Estoy desarrollando una layout que consta de una cabecera (100px de altura) y tres columnas. De esas 3 columnas, 2 serán de ancho fijo. La izquierda y la derecha(150px), la de enmedio será variable según el tamanyo de la ventana, es decir ocupará el resto del ancho.

Quiero que cada una de las columnas llegue hasta abajo aunque no tenga contenido (esto ya lo he conseguido con un script de javascript) pero lo que no consigo es que cuando el contenido es mayor que el tamanyo del div, este se extienda.

Este es mi código html y el script de javascript.

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="en" lang="en">
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4.     <title>Tricky Layout</title>
  5.     <link rel="stylesheet" type="text/css" href="style.css" />
  6.     <script type="text/javascript">
  7. //<![CDATA[
  8. function sniffer() {
  9.    var windowHeight=document.documentElement.clientHeight-100+"px"
  10.     var content=document.getElementById("content");
  11.     content.style.height= windowHeight;
  12. }
  13. onload=sniffer;
  14.  
  15. //]]>
  16.  
  17. <script type="text/javascript">
  18. window.onresize = function() {
  19. sniffer();
  20.  };
  21. </head>
  22. <div id="wrapper"> 
  23.     <div id="top-column"><p>top-column</p></div>
  24.     <div id="content">
  25.         <div id="left-column"><p>left-column</p></div>
  26.        
  27.         <div id="right-column"><p>right-column</p></div>   
  28.         <div id="main-column"><p>main-columnLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  29.                             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  30.                             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  31.                             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  32.                             </p></div>
  33.     </div>
  34.     <div id="clearer"></div>
  35. </div>     
  36.        
  37. </body>
  38. </html>

Y aquí está el CSS:

Código CSS:
Ver original
  1. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  2.         margin: 0;
  3.         padding: 0;
  4.         border: 0;
  5.         font-size: 100%;
  6.         font: inherit;
  7.         vertical-align: baseline; }
  8. html, body{height: 100%; width:100%;}
  9.  
  10. div {}
  11.  
  12. #wrapper{width:100%;height:100%;}
  13.  
  14. #top-column{ height:100px;width:100%;background-color: red;}
  15.  
  16. #content{width:100%;height:100%;height:auto;}
  17.  
  18. #left-column{height:100%;float:left;width:150px;background-color: blue;min-height:100%;height: auto!important;}
  19.  
  20. #main-column{width:auto; height:100%;background-color:yellow;min-height:100%;height: auto!important;}
  21.  
  22. #right-column{height:100%;float:right;width:150px;background-color: green;min-height:100%;height: auto!important;}
  23.  
  24. #clearer{clear:both;}

Gracias de antemano!

Última edición por julioherce; 22/02/2012 a las 05:17
  #2 (permalink)  
Antiguo 22/02/2012, 07:32
 
Fecha de Ingreso: febrero-2012
Mensajes: 84
Antigüedad: 12 años, 1 mes
Puntos: 14
Respuesta: Div cuya altura crezca con el contenido

Hola
Aquí tienes un problema de base.
No pudes determinar el ancho de la parte central de ninguna manera, ya que esta es flexible por el contenedor y por tanto su ancho depende del ancho de la ventana.
No es posible entonces situar el div del contenido con respecto a las columnas, porque las columnas usan una anchura fija en pixeles. Y la central en %. No se si me explico.

De todas formas este artículo igual te da alguna solución a tu problema.

http://css-tricks.com/fluid-width-equal-height-columns/
  #3 (permalink)  
Antiguo 22/02/2012, 08:06
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: Div cuya altura crezca con el contenido

Yo veo el codigo medio sucio. Por ejemplo, por usas important si luego modificas desde js?
height: auto!important;

Aparte, para que igualar esto?: onload=sniffer;

Pero en fin, creo que tus divs no cambian el tamaño porque estan flotados. Podrías poner esto al final de cada columna, justo antes de cerrarlas, y quizas se solucione:

Código CSS:
Ver original
  1. .clear{clear: both;} // esto en la hoja de estilo, por supuesto.
  2. .......
  3. <div class="clear"></div>
  #4 (permalink)  
Antiguo 29/02/2012, 05:10
 
Fecha de Ingreso: febrero-2012
Mensajes: 2
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Div cuya altura crezca con el contenido

Hola, antes de nada muchas gracias por vuestros comentarios. Al final cambié totalmente la manera en la que lo estaba haciendo y lo hice de una manera mucho más fácil. Sin javascript. Aquí lo dejo por si a alguien le sirve de algo.

Un saludo.
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>Tricky layout solved</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.  
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7.  
  8. </head>
  9.  
  10. <div id="container">
  11.     <div id="header">
  12.         <p>Header</p>
  13.     </div>
  14.    
  15.     <div id="left-column">
  16.         <p>Left Column</p>
  17.     </div> 
  18.            
  19.     <div id="right-column">
  20.         <p>Right Column</p>
  21.     </div> 
  22.    
  23.     <div id="main-column">
  24.        <p>Main Column</p>
  25.        <p>main-columnLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  26.                             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  27.                             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  28.                             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  29.                             </p>
  30.                             <p>main-columnLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  31.                             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  32.                             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  33.                             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  34.                             </p>
  35.                            
  36.     </div>
  37.        
  38.     <div class="clearer"></div>
  39. </div>
  40.  
  41. <div id="footer">
  42.     <p>Footer</p>
  43. </div>
  44.  
  45. </body>
  46. </html>


Código CSS:
Ver original
  1. * {padding:0; margin:0; outline: 0;}
  2.  
  3. html, body {height:100%;font-family: verdana, arial, sans-serif;font-size: 1em;outline: 0;}
  4.  
  5. body {background-color: #3cf;}
  6.  
  7. #container {min-height:100%;height: auto!important;height:100%;border-left: solid 200px #090;border-right: solid 200px #090;}
  8.  
  9. #header {height: 4em;background-color: #399;color: #fff;text-align: center;margin-left: -200px;margin-right: -200px;position: relative;z-index: 10;}
  10.  
  11. #main-column {padding: 1em;}
  12.  
  13. #left-column {position: relative;margin-left: -190px;float: left;width: 190px;}
  14.  
  15. #right-column {position: relative;margin-right: -190px;float: right;width: 190px;}
  16.  
  17. #footer {text-align: center;background-color: #366;color: #fff;height: 3em;margin-top: -3em;}
  18.  
  19. .clearer {clear: both;padding-top: 4em;}
  #5 (permalink)  
Antiguo 01/03/2012, 00:08
 
Fecha de Ingreso: abril-2003
Ubicación: Mexico
Mensajes: 604
Antigüedad: 20 años, 11 meses
Puntos: 23
Respuesta: Div cuya altura crezca con el contenido

excelente tu solucion... me gusto y tenia un problema similar y con tu codigo ya pude adaptarlo a lo que necesitaba...

Gracias ....
__________________
¡El Respeto al Derecho Ajeno Es la Paz!

Etiquetas: html, javascript
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 03:44.