Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/12/2012, 12:42
JMunoa7
 
Fecha de Ingreso: diciembre-2012
Mensajes: 4
Antigüedad: 11 años, 11 meses
Puntos: 0
Modificar el tamaño del height dinámicamente

Llevo bastante rato queriendo que el height de un contenedor de mi web sea dinámico pero no lo consigo.

Lo que quiero conseguir es que cuando pinche en el tercer tab (tab-3) el height del content se amolde al tamaño que ocupa el texto, ya que el height no varía y no aparece todo el texto.

Os dejo el CSS y el HTML para a ver si me podeis ayudar:

Código CSS:
Ver original
  1. .content {
  2.     background: #fff;
  3.     position: relative;
  4.     width: 100%;
  5.     height: 370px;
  6.     z-index: 5;
  7.     overflow: hidden;
  8.     box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
  9.     border-radius: 0 3px 3px 3px;
  10. }

Código HTML:
Ver original
  1. <div id="panel">
  2.             <div class="container">
  3.                 <section class="tabs">
  4.                 <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
  5.                 <label for="tab-1" class="tab-label-1">Misi&oacute;n</label>
  6.        
  7.                 <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
  8.                 <label for="tab-2" class="tab-label-2">Visi&oacute;n</label>
  9.        
  10.                 <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" onClick="ChangeSize()" value="ChangeSize" />
  11.                 <label for="tab-3" class="tab-label-3">Valores</label>
  12.            
  13.                 <div class="clear-shadow"></div>
  14.            
  15.                 <div class="content">
  16.                     <div class="content-1">
  17.                         <p>Aprender mientras nos desarrollamos personalmente y como equipo
  18.                         cumpliendo nuestras metas.</p>
  19.                     </div>
  20.                     <div class="content-2">
  21.                         <p>Para el 24 de Junio del 2015, queremos conseguir una satisfacci&oacute;n conjunta de aprendizaje
  22.                         y trabajo realizado, adem&aacute;s de estar orgullosos de los cuatro años en Kibber.</p>
  23.                     </div>
  24.                     <div class="content-3">
  25.                         <h2>primero</h2>
  26.                             <p>La naturalidad es nuestro modo de vida, y tratamos de reflejar eso en cada proyecto.</p><br />
  27.                             <p>La calidad de nuestro trabajo aumenta d&iacute;a a d&iacute;a.</p><br />
  28.                             <p>Aprendemos mientras desarrollamos proyectos que traten de encontrar nuestras pasiones.</p>
  29.                         <h2>segundo</h2>
  30.                             <p>A trav&eacute;s de nuestro esp&iacute;ritu joven y energ&iacute;a
  31.                             superamos nuestros propios l&iacute;mites.</p><br />
  32.                             <p>Damos lo mejor de nosotros mismos por y para nuestros compañeros.</p><br />
  33.                             <p>Consideramos que somos emp&aacute;ticos y humanos.</p><br />
  34.                             <p>Nos gusta dar un toque de felicidad y diversi&oacute;n
  35.                             a cada proyecto que realizamos.</p>
  36.                         <h2>tercero</h2>
  37.                             <p>Estamos abiertos a realizar proyectos con cualquier persona que quiera emprender
  38.                             sin tener en cuenta el entorno socioecon&oacute;mico y cultural.</p><br />
  39.                             <p>Tratamos siempre de reforzar todas las lenguas que se hablan en el equipo,
  40.                             principalmente ingl&eacute;s, euskera y castellano.</p><br />
  41.                             <p>Entendemos los viajes de aprendizaje (Learning journeys) como herramienta b&aacute;sica para
  42.                             la expansi&oacute;n de nuestros conocimientos, mejora profesional, desarrollo personal.</p>
  43.                         <h2>cuarto</h2>
  44.                             <p>Nos consideramos parte activa de MTA realizando proyectos con diferentes equipos
  45.                             de la comunidad, participando con constancia en sus eventos y estando siempre
  46.                             dispuestos a ayudar a aqu&eacute;l que lo requiera.</p><br />
  47.                             <p>Creemos fuertemente en que el trabajo equipo debe ser el soporte de toda actividad,
  48.                             aumentando as&iacute; el aprendizaje y conocimiento obtenidos.</p>
  49.                     </div>
  50.                 </div>
  51.                 </section>
  52.             </div>
  53.         </div>

Y la función ChangeSize:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.                 function ChangeSize(){
  3.                   content = document.getElementById("content");
  4.                   content.style.height = 600px;
  5.                     }
  6.             </script>