Foros del Web » Creando para Internet » CSS »

Problema div height 100%

Estas en el tema de Problema div height 100% en el foro de CSS en Foros del Web. Hola muy buenas, tengo un problemilla con un div lateral... Me gustaria que tuviese una altura al 100% del tamaño del navegador.. He buscado soluciones ...
  #1 (permalink)  
Antiguo 02/09/2009, 09:43
 
Fecha de Ingreso: septiembre-2009
Mensajes: 7
Antigüedad: 8 años, 3 meses
Puntos: 0
Problema div height 100%

Hola muy buenas, tengo un problemilla con un div lateral... Me gustaria que tuviese una altura al 100% del tamaño del navegador.. He buscado soluciones y he intentado lo de poner esto:
Código:
body, html {

	text-align: center;
	height: 100%;
}
* {
    padding:0;
    margin:0 auto;
}

#contenedor {
	position: relative;
	top: 0px;
	left:0px; 
	width: 190px;
	height:100%;
	visibility:visible;
	background-color:#94B5BD; 
	padding:0;
    margin:0 auto;


}
pero no me funciona... Supongo que es por culpa de los divs colindantes al div lateral. Les pego el código css de dichos divs.

Código:
/* #############################################################################
                                  BODY
############################################################################# 
*/


body 
{
  margin:0;
	padding: 0;
	color: #000;
	background-color: #fff;
	font: 10px Verdana, Arial, sans-serif;
	margin-bottom: 2px solid red;
	height:100%;
	
}







#NavBotonOcultarBarraIzqda
{
  /*position:fixed !important;*/
  position:absolute;
  width:21px;
  height: 1500px;	
  top: 221px;
  background-image:url(imagenes/barra_01.png)!important;
	background-image:url(imagenes/barra_01.gif);
  background-repeat: no-repeat;
  background-color:#fff;
  left:184px; 
  background-position: -30px 0px;
  visibility:visible;
}



#NavBotonMostrarBarraIzqda
{
  
  /*position:fixed !important;*/
  position:absolute;
  top: 221px;
  background-color:#fff;
  width:21px;
  height: 1500px;	
  background-image:url(imagenes/barra_02.png)!important;
	background-image:url(imagenes/barra_02.gif);
  background-repeat: no-repeat;
  left:0px; 
  background-position: 	-30px 0px;
  visibility:hidden;
  border-left:2px solid #FF9700;
}

#NavBotonMostrarBarraIzqda.NavBotonMostrarBarraIzqdaHover
{
  background-position: 0px 0px;
  cursor:pointer; 
  

}

#NavBotonOcultarBarraIzqda.NavBotonOcultarBarraIzqdaHover
{

  background-position: 0px 0px;
  cursor:pointer; 

}



/* #############################################################################
                        CONTENEDOR DE LAS ZONAS DE LA IZQUIERDA
############################################################################# */
#NavBarraIzqda 
{
  float:left;
	position: absolute;
	top: 221px;
	left:0;
	/*width:13.49%;*/
	width: 185px;
	height: 1500px;
	background: #61697A;
	z-index:1;

}
A ver si me pueden hechar un cable.. Proque no encuentro el problema. Lo he probado con un div solo y si que funciona.. Pero cuando hay otros divs "más grandes" ....

Gracias de antemano!!

Tom Baker
  #2 (permalink)  
Antiguo 02/09/2009, 10:43
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: Problema div height 100%

Hola Tomas_Lleida

Para ayudarte necesitamos no sólo el css, también es necesario ver cómo tienes el html.

Bye
  #3 (permalink)  
Antiguo 03/09/2009, 02:33
 
Fecha de Ingreso: septiembre-2009
Mensajes: 7
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Problema div height 100%

Ok disculpa.. Te pego todo el HTMl ok? Es algo largo.. Pero para ver si esta bien anidado y tal supongo k es necesario.. Ahi va:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  </head>
  <body>
   
      <div id="AplZonaSeleccion">
        <div id="AplZonaPaginacion">
          <ul>
            <li class="first">
              <a href="#" >anterior </a></li>
            <li>
            <a href="#" >1.Academico oficial  </a></li>
            <li>
            <a href="#" >2.Certificado personal  </a></li>
            <li class="current">
              <a>3.MIR </a></li>
            <li>
            <a href="#" >4.SET </a></li>
            <li>
            <a href="#" >5.Unive </a></li>
            <li>
            <a href="#" >6.Validac </a></li>
            <li class="last">
              <a href="#" >siguiente </a></li>
          </ul>
        </div>
       
	   <br />
        <div class="Informativo"> Este es un mensaje informativo:La lista de certificados es paginable.
        </div>
        
		<!--  Botón perteneciente a la zona de seleccion          -->
        <div class="sigAccion" >
          <a href="#" class="sigBtnHref" title="Limpiar datos">
            <span class="btnLimpiar">
              Limpiar
            </span></a>
        </div>
        
		<div class="Error"> Este es un mensaje informativo:La lista de certificados es paginable.
        </div>
(El codigo sigue en la siguiente respuesta)

Moltes gràcies!! Muchas gracias!!

Tom
  #4 (permalink)  
Antiguo 03/09/2009, 02:36
 
Fecha de Ingreso: septiembre-2009
Mensajes: 7
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Problema div height 100%

Código:
<div id="tableContainer">
         <!--  Tabla de seleccion de registros          -->
         <table width="100%">
          <thead>
            <tr>
              <th width="16%" >  </th >
              <th width="62%"> Otras acciones</th >
              <th class="sort" width="2%"> Código certificado</th>
              <th class="sort" > Descripción</th>
            </tr>
          </thead>
          <tbody> 
            <tr>
              <td class="iconos" >  
                <span class="sigAccion" >
                  <a href="#" class="sigIcnHref " title="Borrar" />
                  <span class=" btnBorrar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Duplicar" />
                  <span class=" btnDuplicar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Modificar" />
                  <span class=" btnModificar">
                  </span></a>
                </span> </td>   
              <td  class="AccionRegistro">
                <ul>
                  <li>
                  <a href="#" >Docència </a></li>
                  <li>
                  <a href="#" >Matrícula(S) </a></li>
                  <li>
                  <a href="#" >Plans(1) </a></li>
                  <li>
                  <a href="#" >Professors(1)  </a></li>
                  <li>
                  <a href="#" >Horaris(9)  </a></li>
                  <li>
                  <a href="#" >HorarisProfessors(1) </a></li>
                </ul></td> 
              <td > CAMD</td>
              <td> Cert. Alumno Matriculado Ext.</td>
            </tr>
            <tr  class="current">
              <td class="iconos" >
                <span class="sigAccion" >
                  <a href="#" class="sigIcnHref " title="Borrar" />
                  <span class=" btnBorrar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Duplicar" />
                  <span class=" btnDuplicar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Modificar" />
                  <span class=" btnModificar">
                  </span></a>
                </span> </td>   </td> 
              <td class="AccionRegistro">
                <ul>  
                  <li>
                  <a href="#" >Docència </a></li> 
                  <li>
                  <a href="#" >Matrícula(S) </a></li> 
                  <li>
                  <a href="#" >Plans(1) </a></li> 
                  <li>
                  <a href="#" >Professors(1)  </a></li> 
                  <li>
                  <a href="#" >Horaris(9)  </a></li> 
                  <li>
                  <a href="#" >HorarisProfessors(1) </a></li>  
                </ul> </td> 
              <td> CAOBETA</td>
              <td> CAO BETA</td>
            </tr>
            <tr>
              <td  class="iconos" >
                 <span class="sigAccion" >
                  <a href="#" class="sigIcnHref " title="Borrar" />
                  <span class=" btnBorrar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Duplicar" />
                  <span class=" btnDuplicar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Modificar" />
                  <span class=" btnModificar">
                  </span></a>
                </span> </td>   </td> 
              <td class="AccionRegistro">
                <ul>  
                  <li>
                  <a href="#" >Docència </a></li> 
                  <li>
                  <a href="#" >Matrícula(S) </a></li> 
                  <li>
                  <a href="#" >Plans(1) </a></li> 
                  <li>
                  <a href="#" >Professors(1)  </a></li> 
                  <li>
                  <a href="#" >Horaris(9)  </a></li> 
                  <li>
                  <a href="#" >HorarisProfessors(1) </a></li>  
                </ul> </td> 
              <td> CAP</td>
              <td> Certificado Academico Personal</td>
            </tr>
  #5 (permalink)  
Antiguo 03/09/2009, 02:37
 
Fecha de Ingreso: septiembre-2009
Mensajes: 7
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Problema div height 100%

Código:
         
			
			
			<tr>
              <td class="iconos" >
                 <span class="sigAccion" >
                  <a href="#" class="sigIcnHref " title="Borrar" />
                  <span class=" btnBorrar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Duplicar" />
                  <span class=" btnDuplicar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Modificar" />
                  <span class=" btnModificar">
                  </span></a>
                </span> </td>   </td>
              <td class="AccionRegistro">
                <ul>  
                  <li>
                  <a href="#" >Docència </a></li> 
                  <li>
                  <a href="#" >Matrícula(S) </a></li> 
                  <li>
                  <a href="#" >Plans(1) </a></li> 
                  <li>
                  <a href="#" >Professors(1)  </a></li> 
                  <li>
                  <a href="#" >Horaris(9)  </a></li> 
                  <li>
                  <a href="#" >HorarisProfessors(1) </a></li>  
                </ul> </td>
              <td> CAP123</td>
              <td> Certificado Academico Personal</td>
            </tr>
            <tr> 
              <td class="iconos" >
                <span class="sigAccion" >
                  <a href="#" class="sigIcnHref " title="Borrar" />
                  <span class=" btnBorrar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Duplicar" />
                  <span class=" btnDuplicar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Modificar" />
                  <span class=" btnModificar">
                  </span></a>
                </span> </td>   </td>
              <td class="AccionRegistro">
                <ul>  
                  <li>
                  <a href="#" >Docència </a></li> 
                  <li>
                  <a href="#" >Matrícula(S) </a></li> 
                  <li>
                  <a href="#" >Plans(1) </a></li> 
                  <li>
                  <a href="#" >Professors(1)  </a></li> 
                  <li>
                  <a href="#" >Horaris(9)  </a></li> 
                  <li>
                  <a href="#" >HorarisProfessors(1) </a></li>  
                </ul> </td> 
              <td> CAPH</td>
              <td> CAP Hago Constar</td>
            </tr>
            <tr> 
              <td class="iconos" >
                <span class="sigAccion" >
                  <a href="#" class="sigIcnHref " title="Borrar" />
                  <span class=" btnBorrar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Duplicar" />
                  <span class=" btnDuplicar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Modificar" />
                  <span class=" btnModificar">
                  </span></a>
                </span> </td>   </td>
              <td class="AccionRegistro">
                <ul>  
                  <li>
                  <a href="#" >Docència </a></li> 
                  <li>
                  <a href="#" >Matrícula(S) </a></li> 
                  <li>
                  <a href="#" >Plans(1) </a></li> 
                  <li>
                  <a href="#" >Professors(1)  </a></li> 
                  <li>
                  <a href="#" >Horaris(9)  </a></li> 
                  <li>
                  <a href="#" >HorarisProfessors(1) </a></li>  
                </ul> </td>
              <td> CAPUPNA</td>
              <td> Ct. Acad. Personal UPNA</td>
            </tr>
            <tr>
              <td class="iconos" >
            <span class="sigAccion" >
                  <a href="#" class="sigIcnHref " title="Borrar" />
                  <span class=" btnBorrar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Duplicar" />
                  <span class=" btnDuplicar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Modificar" />
                  <span class=" btnModificar">
                  </span></a>
                </span> </td>   </td>
              <td class="AccionRegistro">
                <ul>  
                  <li>
                  <a href="#" >Docència </a></li> 
                  <li>
                  <a href="#" >Matrícula(S) </a></li> 
                  <li>
                  <a href="#" >Plans(1) </a></li> 
                  <li>
                  <a href="#" >Professors(1)  </a></li> 
                  <li>
                  <a href="#" >Horaris(9)  </a></li> 
                  <li>
                  <a href="#" >HorarisProfessors(1) </a></li>  
                </ul> </td>
              <td> CHC</td>
              <td> Certificado hago constar</td>
            </tr>
  #6 (permalink)  
Antiguo 03/09/2009, 02:38
 
Fecha de Ingreso: septiembre-2009
Mensajes: 7
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Problema div height 100%

Código:
            <tr>
              <td class="iconos" >
            <span class="sigAccion" >
                  <a href="#" class="sigIcnHref " title="Borrar" />
                  <span class=" btnBorrar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Duplicar" />
                  <span class=" btnDuplicar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Modificar" />
                  <span class=" btnModificar">
                  </span></a>
                </span> </td>   </td>
              <td class="AccionRegistro">
                <ul>  
                  <li>
                  <a href="#" >Docència </a></li> 
                  <li>
                  <a href="#" >Matrícula(S) </a></li> 
                  <li>
                  <a href="#" >Plans(1) </a></li> 
                  <li>
                  <a href="#" >Professors(1)  </a></li> 
                  <li>
                  <a href="#" >Horaris(9)  </a></li> 
                  <li>
                  <a href="#" >HorarisProfessors(1) </a></li>  
                </ul> </td>
              <td> CPSE</td>
              <td> Certifcado Pago Seguro Escolar</td>
            </tr>
        <tr>
              <td class="iconos" >
        <span class="sigAccion" >
                  <a href="#" class="sigIcnHref " title="Borrar" />
                  <span class=" btnBorrar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Duplicar" />
                  <span class=" btnDuplicar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Modificar" />
                  <span class=" btnModificar">
                  </span></a>
                </span> </td>   </td>
              <td class="AccionRegistro">
                <ul>  
                  <li>
                  <a href="#" >Docència </a></li> 
                  <li>
                  <a href="#" >Matrícula(S) </a></li> 
                  <li>
                  <a href="#" >Plans(1) </a></li> 
                  <li>
                  <a href="#" >Professors(1)  </a></li> 
                  <li>
                  <a href="#" >Horaris(9)  </a></li> 
                  <li>
                  <a href="#" >HorarisProfessors(1) </a></li>  
                </ul> </td>
              <td> MIR</td>
              <td> Certificado MIR</td>
            </tr>
            <tr>
              <td class="iconos" >
            <span class="sigAccion" >
                  <a href="#" class="sigIcnHref " title="Borrar" />
                  <span class=" btnBorrar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Duplicar" />
                  <span class=" btnDuplicar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Modificar" />
                  <span class=" btnModificar">
                  </span></a>
                </span> </td>   </td>
              <td class="AccionRegistro">
                <ul>  
                  <li>
                  <a href="#" >Docència </a></li> 
                  <li>
                  <a href="#" >Matrícula(S) </a></li> 
                  <li>
                  <a href="#" >Plans(1) </a></li> 
                  <li>
                  <a href="#" >Professors(1)  </a></li> 
                  <li>
                  <a href="#" >Horaris(9)  </a></li> 
                  <li>
                  <a href="#" >HorarisProfessors(1) </a></li>  
                </ul> </td>
              <td> SET</td>
              <td> SET oficial trilingÜe</td>
            </tr>
            <tr>
              <td class="iconos" >
       <span class="sigAccion" >
                  <a href="#" class="sigIcnHref " title="Borrar" />
                  <span class=" btnBorrar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Duplicar" />
                  <span class=" btnDuplicar">
                  </span></a>
                  <a href="#" class="sigIcnHref " title="Modificar" />
                  <span class=" btnModificar">
                  </span></a>
                </span> </td>   </td>
              <td class="AccionRegistro">
                <ul>  
                  <li>
                  <a href="#" >Docència </a></li> 
                  <li>
                  <a href="#" >Matrícula(S) </a></li> 
                  <li>
                  <a href="#" >Plans(1) </a></li> 
                  <li>
                  <a href="#" >Professors(1)  </a></li> 
                  <li>
                  <a href="#" >Horaris(9)  </a></li> 
                  <li>
                  <a href="#" >HorarisProfessors(1) </a></li>  
                </ul> </td>
              <td> SETB</td>
              <td> SET oficial bilingÜe</td>
            </tr>
          </tbody>
        </table>

        </div>

	 </div>
      <!-- fin  Zona selección          -->
	  
	  
    </div>
    
	<!-- fin  Zona Aplicación          -->
	</div>
	
    <div id="NavBarraIzqda">
	
	
      <div id="NavSeleccionApl" >
        <!-- boton de cerrar (X) -->
        <span class="sigAccion" >
          <a onClick="document.getElementById('NavSeleccionApl').style.visibility = 'hidden';return false;" href="#" class="sigIcnHref " title="Cerrar" />
            <span class="btnCerrar"></span>
          </a>
        </span> 
        <!--
        <div >
        <span >
        <a onClick="document.getElementById('NavSeleccionApl').style.visibility = 'hidden';return false;" href="#" >X</a>
        </span>
        </div>       --><br />
        <ul>
          <li class="parent">
            <a href="#" >Accesos</a>
            <ul>
              <li>
              <a href="#">Usuario ACCS pruebas acceso</a></li>
          <li class="parent">
            <a href="#" >Usuario ACCS prog. intercambio</a>
            <ul>
              <li>
              <a href="#">Clave EDFC</a></li>
          <li>
          <a href="#">Clave 0000</a></li>
        </ul></li> 
        <li>
        <a href="#">Mantenimientos ACCS</a></li>
        </ul></li>
        <li class="parent open">
          <a href="#" >Campus Docente</a>
          <ul>
            <li class="parent open">
              <a href="#" >Perfil de administrador</a>
              <ul>
                <li class="current">
                  <a href="#">Clave EDFC</a></li>
                <li>
                <a href="#">Clave 0000</a></li>
          </ul></li>
        <li>
        <a href="#">Perfil de gestor académico</a></li>
        <li>
        <a href="#">Perfil de profesor</a></li>
        </ul></li>
        <li>
        <a href="#">Personas y Servicios</a></li>
        <li class="parent">
          <a href="#" >Exámenes</a>
          <ul>
            <li>
            <a href="#">Centro 101</a></li>
        <li>
        <a href="#">Clave 0103</a></li>
        <li>
        <a href="#">Clave 0000</a></li>
        </ul></li>
        </ul> 
      </div>
      <!-- fin del "NavSeleccionApl"     -->
      
	  
	  <div id="NavZonaMenu">
        <!-- inicio Zona menú          -->
      		 <ul>
          <li> <a href="#">Seleccionar grupo</a></li>
          
		  <li><a href="#"> Fichas de alumno</a></li>
		  
		  
		  
		  
		
		  <li> Calificaciones finales
			<ul>
			  <li class="current"><a href="#"> Calificar</a></li>
			  <li><a href="#"> Revisión de examen</a></li>
			  <li><a href="#"> Traspasar a actas </a></li>
			  <li><a href="#"> Cerrar actas </a>
              	<ul>
          			  <li><a href="#"> Calificar</a></li>
          			  <li><a href="#"> Revisión de examen</a></li>
          			  <li><a href="#"> Traspasar a actas </a></li>
          			  <li><a href="#"> Cerrar actas </a></li>
		          	</ul> 
        
        
        </li>
			</ul>  
		  </li>
		  
		  <li> Calificaciones desglosadas
			<ul>
			  <li><a href="#"> Definir plantillas</a></li>
			  <li> <a href="#">Calificar</a></li>
			  <li> <a href="#">Publicar</a></li>
			</ul>  
		  </li>
		
		  <li > Listados
			<ul>
			  <li> <a href="#" >Lista de clase</a></li>
		      <li><a href="#"> Lista de fichas de alumno</a></li>
			  <li><a href="#"> Lista de notas finales</a></li>
			  <li><a href="#"> Lista de notas por plantillas</a></li>
			  <li><a href="#"> Lista de suspendidos</a></li>
			  <li> <a href="#"> Estadísticas</a></li>

			</ul>  
		  </li>
		  

		  <li> Opciones
			<ul>
			  <li><a href="#"> Opciones de listados</a></li>
			  <li> <a href="#">Cambio password</a></li>
			  <li> <a href="#">Operaciones realizadas en el grupo</a></li>
			</ul>  
		  </li>

        </ul>

      </div>
      <!-- fin  Zona menu -->

      <div id="NavZonaLinks">
        <ul >
          <li>
          <a href="">Sigma portal</a></li>
          <li>
          <a href="estilos2.htm">Sigma azul</a></li>
		  <a href="estilos2.htm">Sigma Naranja</a></li>
		  <a href="javascript:EstablecerCSS('uab');">U.A.B.</a></li>
          <a href="javascript:EstablecerCSS('uva');">U.V.A.</a></li>
          <li class="current">
            <a href="#">Guia del estudiante</a></li>
          <li>
          <a href="#"></a></li> 
        </ul>
  </div>
  </div>

  <div id="NavBotonOcultarBarraIzqda" 
   onClick="return VerOcultarIzqda();"
   onMouseover = "this.className='NavBotonOcultarBarraIzqdaHover';"  
   onMouseout = "this.className='';"  >
  </div>	 
  <div id="NavBotonMostrarBarraIzqda" 
   onClick="return VerOcultarIzqda();"
   onMouseover = "this.className='NavBotonMostrarBarraIzqdaHover'"  
   onMouseout = "this.className=''"  >
  </div>	 

  </body>
</html>
Disculpas por tanto código!!

Graciassss
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 19:15.