Foros del Web - Ver Mensaje Individual

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!