Foros del Web » Creando para Internet » CSS »

height 100% CSS

 Estas en el tema de height 100% CSS en el foro de CSS en Foros del Web. Ola quiero poner a un div una altura del 100% de la pagina pero no se como hacerlo. he probado a ponerle height:100% al body ...
  #1 (permalink)  
Antiguo 09/03/2009, 13:54
 
Fecha de Ingreso: julio-2007
Mensajes: 102
Antigüedad: 16 años, 9 meses
Puntos: 0
height 100% CSS
Ola quiero poner a un div una altura del 100% de la pagina pero no se como hacerlo. he probado a ponerle height:100% al body y html pero sigue sin funcionar.

Este es el archivo css

Código HTML:
html {
   height:100%;
}
body{
	height:100%;
	padding:0px;
	margin:0px;
	background-color: #FFFFFF;
	text-align:center; 
	
}
#container {
      
       padding: 0;
	   height:auto;
       width:1152px;
	   background-image: url(imagenes/menu/pie3.jpg);
	   background-position:bottom left;
	   background-repeat: no-repeat ;  
	   margin: 0 auto 0 auto; 
	   text-align:left	   
	 
}
#header{
	width:100%;
	height:auto;
	margin:10px 0 0px 0px;
	text-align: center;
}
#izquierda{
       width:170px;
	height:100%;        
       margin:0 20px 0 0px;
       float:left;
       padding:0px;
	      
}

#menu{
	 float:left;
	 margin:0;
	 width:720px;
	 display:inline;

}
#principal{
       height:100%; 
       margin:0;
	   width:720px;
       padding:0px;
	   display:inline;
	   POSITION: relative;
}
#derecha{
       width:215px;
       height:100%;  
       margin:0 0px 0 0px;
       float:right;
       padding:0;
	   background-image: url(imagenes/menu/lateral2.jpg);
	   background-position:right;
	   background-repeat:repeat-y;
	   
}
#pie{
	width:100%;
	height:246px;
	margin:0px 0 0px 0px;
	text-align: center;
	background-image: url(imagenes/menu/pie2.jpg);
	background-position:right;	  
	   background-repeat: no-repeat ; 
	   clear:both;
}
Y aqui el html:

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>

<link href="1estructura.css" rel="stylesheet" type="text/css">
<link href="estilo.css" rel="stylesheet" type="text/css">
<link href="cuadros.css" rel="stylesheet" type="text/css">

</HEAD>
<BODY>

<div id="container">

  <div id="header"><img src="imagenes/menu/logos/cabezera_3.jpg" width="1152" height="209" alt="BpmLokos"></div>
<div id="izquierda">
  <div class="menu_top">
                <div align="left"><div class="pestana"></div></div>
    </div><br> 
                <div class="menu"></div>
                
                <div class="menu_down"></div>
                <div class="menu_top">
                  <div class="pestana"></div>
                </div> 
          <div class="menu"></div>
                
                <div class="menu_down"></div>
               <div class="menu_top">
                  <div class="pestana"></div>
    </div> 
          <div class="menu"></div>
                
                <div class="menu_down"></div>
                <div class="menu_top">
                  <div class="pestana"></div>
                </div> 
                <div class="menu">
</div>
                <div class="menu_down"></div>
                <div class="menu_top"><div class="pestana"></div></div><div class="menu"><span class="text_1">
                         
                              </span></div><div class="menu_down"></div>
            
               <div class="menu_top"><div class="pestana"></div></div>
                    <div class="menu"></div><div class="menu_down"></div>
</div>
<div id="derecha">
<div class="menu_top">
          <div class="pestana"></div>
    </div><br>
        <div class="menu">
        </div><div class="menu_down"></div> 
          <div class="menu_top"><div class="pestana"></div></div>
                <div class="menu">
                </div><div class="menu_down"></div>
                    <div class="menu_top"><div class="pestana"></div></div><div class="menu"></div>
        <div class="menu_down"></div>
           <div class="menu_top"><div class="pestana"></div></div>
               <div class="menu"></div><div class="menu_down"></div>
<div style="clear:both;">
  
</div>
</div>
<div id="menu">
  <div class="texto_top">&nbsp;&nbsp;</div>
<div class="texto_center"></div>
<div class="texto_down"></div>
</div><br>
<div id="principal">
  pagina
 
</div>

<div id="pie"></div>
<div style="clear:both;"></div>

</div>
</BODY>
</HTML>
haber si me pueden ayudar, quiero que las tres columnas (los divs izquierda,derecha y principal) tengan el 100% de altura gracias.
Última edición por vivi_; 17/03/2009 a las 10:55
  #2 (permalink)  
Antiguo 09/03/2009, 16:09
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 16 años, 1 mes
Puntos: 53
Respuesta: height 100% CSS
Claro, pero tu div izquierdo tiene el 100% de qué? el contenedor no tiene tamaño definido, para eso deberías poner un min-height de 100% a tu container, y en ie, un height 100% al container.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #3 (permalink)  
Antiguo 09/03/2009, 16:49
 
Fecha de Ingreso: julio-2007
Mensajes: 102
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: height 100% CSS
muchas gracias pero he colocado un min-height y un height de 100% pero sigue sin bajar el div hasta habajo del todo. que puedo hacer? gracias
  #4 (permalink)  
Antiguo 09/03/2009, 17:01
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 18 años, 5 meses
Puntos: 12
Respuesta: height 100% CSS
Intentalo así a ver

html body{
height:100%;
padding:0px;
margin:0px;
background-color: #FFFFFF;
text-align:center;

}
#container {

padding: 0;
min-height: 100%;
width:1152px;
background-image: url(imagenes/menu/pie3.jpg);
background-position:bottom left;
background-repeat: no-repeat ;
margin: 0 auto 0 auto;
text-align:left

}
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #5 (permalink)  
Antiguo 09/03/2009, 17:14
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: height 100% CSS
Hola:

Prueba con esto:

overflow:hidden;

Saludos.
  #6 (permalink)  
Antiguo 10/03/2009, 06:16
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 16 años, 5 meses
Puntos: 4
Respuesta: height 100% CSS
Hola, con este código que te pongo, que es el tuyo pero con colores de fondo para distinguir las zonas y alguna cosa más, los div izquierda, principal y derecha crecerán con respecto al contenido que alberguen cada uno y con ellos el div contairne. No se si es lo que quieres. Ahora bien, si lo que quieres es que esas columnas tengan siempre el mismo tamaño independientemente del contenido, eso es otra historia.

Código: 
html {
   height:100%;
}
body{
	height:100%;
	padding:0px;
	margin:0px;
	background-color: #FFFFFF;
	text-align:center; 
	
}
#container {
	padding: 0;
	height:auto;
	width:1152px;
	margin: 0 auto 0 auto;
	text-align:left;
	background: #006666 no-repeat left bottom;	 
}
#header{
	width:100%;
	height:auto;
	margin:10px 0 0px 0px;
	text-align: center;
	background: #009966;
}
#izquierda{
	width:170px;
	height:100%;
	margin:0 20px 0 0px;
	float:left;
	padding:0px;
	background: #990000;	      
}

#menu{
	float:left;
	margin:0;
	width:720px;
	background: #CC0000;
}
#principal{
	height:100%;
	margin:0;
	width:720px;
	padding:0px;
	background: #99CC33;
	float: left;
}
#derecha{
	width:215px;
	height:100%;
	margin:0 0px 0 0px;
	float:right;
	padding:0;
	background-position:right;
	background-repeat:repeat-y;
	background-color: #00CCFF;	   
}
#pie{
	width:100%;
	height:246px;
	margin:0px 0 0px 0px;
	text-align: center;
	clear:both;
	background: #999900;
}
  #7 (permalink)  
Antiguo 10/03/2009, 09:18
 
Fecha de Ingreso: julio-2007
Mensajes: 102
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: height 100% CSS
quiero que si la columna del centro mide mas que la de la izquierda y la derecha, esas dos se igualen que la del centro (osea que llegen hasta el final de la pagina)

gracias
Última edición por vivi_; 10/03/2009 a las 09:55
  #8 (permalink)  
Antiguo 10/03/2009, 12:22
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 16 años, 5 meses
Puntos: 4
Respuesta: height 100% CSS
Eso es un efecto de falsas columnas puedes encontrar ejemplos en

http://www.araudi.net/

y uno que me gusta especialmente

http://matthewjamestaylor.com/blog/e...r-css-no-hacks
  #9 (permalink)  
Antiguo 10/03/2009, 16:15
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: height 100% CSS
Hola:

Hoy me he dado cuenta de que tienes un pequeño error al declarar el DTD, ponlo así:

Código: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Saludos.
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 06:10.