Hola buenas a todos. Estoy con un sistema de pestañas pero el caso es que el div no se me agranda con el contenido si no que me sale una pequeña parte solo. He mirado y probado cosas pero no logro hacer que me muestre todo el contenido, le he puesto height y demas (ya que no tiene para que se ajuste) pero iba por 1000% y solo mostraba unos 4 dedos. Este es el codigo:
Código:
.tabs { /* es el rectángulo contenedor */
margin: 0 auto;
min-height: 200px;
position: relative;
width: 550px;
}
.tab { /* cada una de las pestañas */
float: left;
}
.tab label { /* la parte superior con el título de la pestaña */
background-color: #456;
border-radius: 5px 5px 0 0;
box-shadow: -3px 3px 2px #678 inset;
color: #DDD;
cursor: pointer;
left: 0;
margin-right: 1px;
padding: 5px 15px;
position: relative;
text-shadow: 1px 1px #000;
}
/* el control input sólo lo necesitamos para que las pestañas permanezcan abiertas así que lo ocultamos */
.tab [type=radio] { display: none; }
/* el contenido de las pestañas */
.content {
background-color: #678;
bottom: 0;
left: 0;
overflow: hidden;
padding: 20px;
position: absolute;
right: 0;
top: 23px;
}
/* y un poco de animación */
.content > * {
opacity: 0;
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
/* controlamos la pestaña activa */
[type="radio"]:checked ~ label {
background-color: #678;
box-shadow: 0 3px 2px #89A inset;
color: #FFF;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content { z-index: 1; }
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
También os dejo una imagen de como me sale (es del content que es lo que me interesa):
Gracias por la ayuda