contenido 100% height

charlyta · #1 (**permalink**) 07/11/2012, 05:57

Hola. Me resulta imposible adaptar el contenido de un div al 100% height. El principal problema es que lo intento adaptar con un footer bottom fixed y no hay manera. Este es el codigo y el enlace donde ver el ejemplo:

http://jsfiddle.net/charlyta/hyfUe/

Código HTML:

<!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 name="Author" content="(c) 2008 - pud.ca">
    <meta http-equiv="imagetoolbar" content="no">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>100% height example</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            }
        
        body, html {
            height: 100%;
            }
        
        #container {
			background: #f00; /* styling only */
			width: 100%;
			margin: 0 auto;
			position: relative;
			height: auto !important;
			min-height: 100%;
			height: 100%;
			
	
	
            }
        
        #content {
			padding-bottom: 100px;
			width: 980px;
			background-color: #FFF;
			margin: 0 auto;
			min-height: 100%;
			margin-top: -20px;
			-webkit-box-shadow: 0px 1px 3px rgba(27, 57, 50, 0.44);
			-moz-box-shadow:    0px 1px 3px rgba(27, 57, 50, 0.44);
			box-shadow:         0px 1px 3px rgba(27, 57, 50, 0.44);
			-moz-border-radius: 5px;
			border-radius: 5px;
			position:relative;
			display: table;
			
            }
        
        #footer {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            background: #0f0;
            }
			
			#header {
           
            height: 100px;
            width: 100%;
            background: #0f0;
            }
            
    </style>
</head>
<body>
    
    <div id="container">
    <div id="header">
    header
</div>
        <div id="content">
            Your content goes here
        </div>
        <div id="footer">
            Footer here
        </div>        
    </div>



</body></html>

pzin · #2 (**permalink**) 07/11/2012, 06:26

Si quitas lo de display:table y también lo de height:auto !important debería de funcionar. Lo de !important prevalece sobre las definiciones posteriores que haces, así que siempre será una altura automática.

charlyta · #3 (**permalink**) 07/11/2012, 06:30

Gracias por responder, pero no funciona

pzin · #4 (**permalink**) 07/11/2012, 06:32

A mi me funciona.

charlyta · #5 (**permalink**) 07/11/2012, 06:35

No, fíjate en el bottom. lo pasa por debajo y no acaba ahí.

pzin · #6 (**permalink**) 07/11/2012, 06:49

Pero funciona para lo que preguntabas.

Yo haría algo más simple para conseguir lo que quieres, algo así:

Código CSS:

Ver originalbody,html,#content {
  height:100%
}
#header,#footer 
  height: 100px;
  background:red
}
#content{
  position:relative
}
#footer{
  position:absolute;
  bottom:0;
  width:100%;
}

Código HTML:

Ver original<body>
    
    <div id="content">
 
        <div id="header">
            header
        </div>
 
        Your content goes here
       
        <div id="footer">
            Footer here
        </div>
        
    </div>
 
</body>

charlyta · #7 (**permalink**) 07/11/2012, 06:53

Eso fue lo primero que probé,pero cuando pongo un div a 100% height dentro del content no funciona. a eso me refiero

pzin · #8 (**permalink**) 07/11/2012, 06:59

¿Otro div para qué? ¿Qué quieres hacer?

charlyta · #9 (**permalink**) 07/11/2012, 07:02

has visto el enlace? http://jsfiddle.net/charlyta/hyfUe/

pzin · #10 (**permalink**) 07/11/2012, 07:09

Si, y no veo ningún div a 100% height dentro del content. De ahí me pregunta, ¿qué quieres hacer?

charlyta · #11 (**permalink**) 07/11/2012, 07:15

La cuestión, perdona si me explico mal, es que si pong en ese div 100% no funciona y lo que quiero es que ocupe el espacio hasta el footer y si pongo
position:absolute;
height:100%

me desborda el footer

pzin · #12 (**permalink**) 07/11/2012, 07:18

El problema de porqué sobrepasa es porque toma el 100% del padre pero también cuentan los 100 píxeles que tiene header. Luego habría que posicionar header de forma absoluta para que salga del flujo del html.

Eso y con algunos ajustes más quedaría como quieres me parece: http://jsfiddle.net/FD25T/

charlyta · #13 (**permalink**) 07/11/2012, 08:21

No bien bien. Me refería a esto pero con el margin-to negativo com en el ejemplo anterior: http://jsfiddle.net/charlyta/aEwQX/