como poner scrollbar en css

infosol · #1 (**permalink**) 25/08/2011, 09:09

Hola buen día a todos, tengo un pequeño problema con mi diseño en una aplicación web, resulta que no me coloca el scroll bar y se oculta el texto en el footer anexo codigos, lo que deseo es que se agregue automaticamente el scrollbar vertical ya lo intente con overflow-y pero nada, de antemano muchas gracias por la ayuda y sugerencias, saludos.
ESTE ES EL CSS

Código:

/* CSS Document */
html, body
{
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	background: #09F;
	font:Arial, Helvetica, sans-serif;
	color:#000000;
	padding:0;
	height:auto;
}

#cuadro-principal
{
	width:100%;
	margin-top:0;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0;
	min-height: 100%;
	position:absolute;
}

#cuadro-pie {
	width: 100%;
	background:url(../../imagenes/estructura/bg_footer.png);
	position: absolute;
	bottom: 0; !important
	bottom: -1px;
	color:#FFFFFF;
	font: 70% Arial, Helvetica, sans-serif bold;
	text-align:center;
	height:60px;
}

#redes-sociales
{
	float:left;
	width:15%;
	height:50px;
	position:relative;
	margin-right:20px;
}
#redes-sociales h2
{
	font: Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:italic;
	font-weight:bold;
	text-align:center;
	color:#FFFFFF;
	text-align:justify;
	background-color:#F90;
}


#menu, #contenido {
	float:left;
	display:inline;
}
#menu {
	width:300px;
	margin-bottom:20px;
}

#contenido 
{
	width:800px;
	padding:20px 25px;
	position:relative;
	height:auto;!important
}

#titulos_Tabla
{
	text-align:center;
	font-size:20px;
	font-weight:bold;
	color:#fff;
	text-shadow:#333 0px -2px 0px;
	
}
#subtitulos_tabla
{
	text-align:justify;
	font-size:18px;
	font-weight:bold;
	color:#FFFFFF;
	text-shadow:#333 0px -2px 0px;
}
#encabezado_Renglon
{
	
	text-align:center;
	font-size:18px;
	font-weight:bold;
	color:#FFF;
	text-shadow:#333 0px -2px 0px;
	
}

#contenido_tabla
{
	color:#FFFFFF;
	padding:5px;
	font-weight:bold;
	text-align:justify;

}
#contenido_tabla td
{
	padding:5px;
	font-size:12px;
}
/* Contenido de #menu */	

#menu h4 {
	font-family:"Myriad Pro", Verdana, Arial;
	font-size:18px;
	font-style:italic;
	font-weight:bold;
	padding:10px 20px;
	letter-spacing:-1px;
	color:#ebf1f1;
	background:#333;
	text-shadow:#000 0px -2px 0px;
}

#menu h6 {
	font-family:"Myriad Pro", Verdana, Arial;
	font-size:16px;
	font-style:italic;
	font-weight:bold;
	padding:10px 20px;
	letter-spacing:-1px;
	color: #FFF;
	background:#333;

}
#menu p 
{
	color:#666; 
	padding:0px 0px; 
	line-height:150%;
}
#menu p a 
{
	color:#47595F; 
	border-bottom:1px dotted #FFF;
}
#menu p a:hover 
{
	color:#111; 
	border-bottom:1px dotted #333;
}

#menu ul 
{
	margin-bottom:20px;
}
#menu ul li {
	font-family:"Lucida Grande", Verdana, Arial;
	display:inline;
	cursor:pointer;
}	
#menu ul li span 
{
	padding:0px;
	display:block;
	background:#ebf1f1 url(../../imagenes/preescolar/nav.gif) repeat-x 0 0;
	border-bottom:1px solid #E7E7E7;
	border-top:1px solid #FFF;
	font-size:10px;
}	
#menu ul li span a 
{
	font-family:Arial;
	font-weight:bold;
	font-size:18px;
	letter-spacing:-1px;
	background-position:15px 12px;
	background-repeat:no-repeat;
	color:#a0a9a9;		
	text-shadow:#FFF 0px 1px 0px;
	padding:15px 10px 15px 60px;
	display:block;			
}
#menu ul li span a:hover 
{
	color:#7b8585;
}
#menu ul li span.open a 
{
	color:#333;
}
#menu a 
{
	outline:none;
}
#menu ul li span a#link-inicio 
{
	background-image:url(../../imagenes/estructura/inicio.png)
}
#menu ul li span a#link-lineamientos 
{
	background-image:url(../../imagenes/estructura/lineamientos.png)
}
#menu ul li span a#link-calendario 
{
	background-image:url(../../imagenes/estructura/calendario.png);					
}
#menu ul li span a#link-boleta
{
	background-image:url(../../imagenes/estructura/boleta.png);					
}
#menu ul li span a#link-cerrar-sesion 
{
	background-image:url(../../imagenes/estructura/cerrarSesion.png);					
}
#menu ul li span a#link-directorio 
{
	background-image:url(../../imagenes/estructura/directorio.png);
}
#menu ul li span a#link-conducta 
{
	background-image:url(../../imagenes/estructura/conducta.png)
}

#menu ul li ul{
	margin-bottom:0px;
}	
#menu ul li ul li {
	display:inline;
	font-weight:normal;
	font-size:11px;
}
#menu ul li ul li a {
	display:block;
	color:#444;
	padding:11px 10px 11px 60px;
	background-position:25px 11px;
	background-repeat:no-repeat;
	background-color:#f1f5f5;
	border-bottom:1px solid #E7E7E7;
	border-top:1px solid #FFF;
}
#menu ul li ul li a:hover {
	color:#000;
}

#menu ul li ul li a.add {
	background-image:url(../../imagenes/preescolar/add_16.png);
}
#menu ul li ul li a.list {
	background-image:url(../../imagenes/preescolar/arrow_right_16.png);
}
#menu ul li ul li a.bullet {
	background-image:url(../../imagenes/preescolar/bullet_blue.png);
}

/* Contenido de #contenido */			

#contenido h2 {
	font-family:"Myriad Pro", Verdana, Arial;
	font-size:28px;
	letter-spacing:-3px;
	font-weight:bold;
	color:#FC6;
	text-shadow:#333 0px -2px 0px;
	margin-bottom:20px;
	padding-bottom:10px;
	border-bottom:5px solid #ebf1f1;
}
#contenido p {
	font-size:14px;
}

*{
	margin:0;
	padding:0;
	font-family:tahoma;
	font-size:8pt;
}

.disabled{
	color:#CCCCCC;
}

.headbox{
	background: #F7F9FC;
	width:100%;
	height:15px;
	display:block;
	vertical-align:top;
}
.bodybox{
	background-color:#fff;
	width:100%;
}
#barcal{
	background-color:#E6EDF5;
	width:100%;
	height:30px;
}

Código HTML:

<body>
	<div id="cuadro-principal">
    	<div id="cuadro-contenido">
            
            <div id="menu">
            	<h4>
                	Bienvenido
                </h4>
                <h6>
                	<?php						
						$usuario=$_SESSION['idusuario'];
						$Sql="select Nombre FROM alumnos where Matricula='$usuario'";
						$SqlUltimaVisita="SELECT Fecha FROM bitacora WHERE Usuario = '$usuario' AND Accion = 'ACCESO' ORDER BY IdBitacora DESC LIMIT 2";
						$result=mysql_query($Sql,$link);
						$resultVisita = mysql_query($SqlUltimaVisita,$linkVisita);
						$renglon=mysql_num_rows($result);

						if ($resultVisita>0)
						{
							$renglonVisita=mysql_num_rows($resultVisita);
						}
						else
						{
							echo "<script> alert('error1')</script>";
						}
						$nombre = mysql_result($result,$renglon-1); 
						if ($renglonVisita>0)
						{
							$visita = mysql_result($resultVisita,$renglonVisita-1)	;
						}
						
						echo $nombre; 
						
						if ($renglonVisita>0)
						{
							
							echo "<br> ÚLTIMA VISITA EL: " . $visita . "<br />"; 
						}
						else
						{
							echo "<br>TU PRIMER VISITA: " . date("j/n/Y ") . " a las " . date("H:i:s");
						}
						
					?>
                </h6>
            	<ul>
                	<li>
                    	<span <?php if($p == "inicio"){echo 'class="current"';} ?>>
                        	<a href="index.php" id="link-inicio" target="_self" >Inicio</a>
                        </span>
           			</li>
                	
            	</ul>
            </div>
            <!--/menu-->
            <div id="contenido">       
				  <table>
                  	
                    <tr>
                    	<td id="subtitulos_tabla" colspan="4" align="center">
                        	DOCENTES
                        </td>
                    </tr>
                    <tr id="encabezado_Renglon">
                    	<td><p>NOMBRE</p></td>
                        <td><p>MATERIAS</p></td>
                        <td><p>GRUPOS</p></td>
                        <td><p>CONTACTO</p></td>
                    </tr>
                    <tr id="contenido_tabla">
                    	<td>Mar&iacute;a Guadalupe Cortinas Ag&uuml;ero</td>
                        <td>ESPA&Ntilde;OL I</td>
                        <td>1º A B C</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr id="contenido_tabla">
                    	<td>Genoveva Pluma Gonz&aacute;lez</td>
                        <td>ESPA&Ntilde;OL II</td>
                        <td>2º A B C</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr id="contenido_tabla">
                    	<td>Ma. del Refugio Mart&iacute;nez Le&oacute;n</td>
                        <td>ESPA&Ntilde;OL III</td>
                        <td>3º A B C</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr id="contenido_tabla">
                    	<td>Arely Garc&iacute;a Olivo</td>
                        <td>MATEM&Aacute;TICAS I</td>
                        <td>1º A B C</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr id="contenido_tabla">
                    	<td>Nabor Dur&aacute;n Hern&aacute;ndez</td>
                        <td>MATEM&Aacute;TICAS II</td>
                        <td>2º A B C</td>
                        <td>iqarelihotmail.com</td>
                    </tr>
                    
                    
                  </table>   
            </div>
        </div>
    </div>
    
</body>
</html>

cristian_cena · #2 (**permalink**) 25/08/2011, 10:59

Suponiendo que defines un width/height y luego aplicas overflow:auto;
Si el contenido supera al width definido hará que aparezca un scrollbar en x
Si el contenido supera al height definido hará que aparezca un scrollbar en y.

Espero te sea útil. Saludos.

infosol · #3 (**permalink**) 25/08/2011, 12:46

Muchas gracias cristian_cena una solucion rapida que aplique fue que le asigne un min-height y un min-width y los overflow los puse en auto.

hasta pronto.