Div cuya altura crezca con el contenido

julioherce · #1 (**permalink**) 22/02/2012, 04:44

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Tricky Layout</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript">
//<![CDATA[
function sniffer() {
    var windowHeight=document.documentElement.clientHeight-100+"px"
    var content=document.getElementById("content"); 
    content.style.height= windowHeight;
}
onload=sniffer;
 
//]]>
</script>
 
<script type="text/javascript">
window.onresize = function() {
sniffer();
 };
</script>
</head>
<body>
<div id="wrapper">  
    <div id="top-column"><p>top-column</p></div>
    <div id="content">
        <div id="left-column"><p>left-column</p></div>
        
        <div id="right-column"><p>right-column</p></div>    
        <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.
                            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.
                            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.
                            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.
                            </p></div>
    </div>
    <div id="clearer"></div>
</div>      
        
</body>
</html>

Y aquí está el CSS:

Código CSS:

Ver originalhtml, 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 {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline; }
html, body{height: 100%; width:100%;}
 
div {}
 
#wrapper{width:100%;height:100%;}
 
#top-column{ height:100px;width:100%;background-color: red;}
 
#content{width:100%;height:100%;height:auto;}
 
#left-column{height:100%;float:left;width:150px;background-color: blue;min-height:100%;height: auto!important;}
 
#main-column{width:auto; height:100%;background-color:yellow;min-height:100%;height: auto!important;}
 
#right-column{height:100%;float:right;width:150px;background-color: green;min-height:100%;height: auto!important;}
 
#clearer{clear:both;}

Gracias de antemano!

joseoliveras · #2 (**permalink**) 22/02/2012, 07:32

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/

mayid · #3 (**permalink**) 22/02/2012, 08:06

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.clear{clear: both;} // esto en la hoja de estilo, por supuesto.
.......
<div class="clear"></div>

julioherce · #4 (**permalink**) 29/02/2012, 05:10

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Tricky layout solved</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<link rel="stylesheet" type="text/css" href="style.css" />
 
</head>
<body>
 
<div id="container">
    <div id="header">
        <p>Header</p>
    </div>
    
    <div id="left-column">
        <p>Left Column</p>
    </div>  
           
    <div id="right-column">
        <p>Right Column</p>
    </div>  
    
    <div id="main-column">
       <p>Main Column</p>
       <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.
                            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.
                            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.
                            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.
                            </p>
                            <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.
                            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.
                            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.
                            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.
                            </p>
                            
    </div>
       
    <div class="clearer"></div>
</div>
 
<div id="footer">
    <p>Footer</p>
</div>
 
</body>
</html>

Código CSS:

Ver original* {padding:0; margin:0; outline: 0;}
 
html, body {height:100%;font-family: verdana, arial, sans-serif;font-size: 1em;outline: 0;}
 
body {background-color: #3cf;}
 
#container {min-height:100%;height: auto!important;height:100%;border-left: solid 200px #090;border-right: solid 200px #090;}
 
#header {height: 4em;background-color: #399;color: #fff;text-align: center;margin-left: -200px;margin-right: -200px;position: relative;z-index: 10;}
 
#main-column {padding: 1em;}
 
#left-column {position: relative;margin-left: -190px;float: left;width: 190px;}
 
#right-column {position: relative;margin-right: -190px;float: right;width: 190px;}
 
#footer {text-align: center;background-color: #366;color: #fff;height: 3em;margin-top: -3em;}
 
.clearer {clear: both;padding-top: 4em;}

HalconVigia · #5 (**permalink**) 01/03/2012, 00:08

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

Gracias ....