Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/07/2012, 18:43
yavierre
 
Fecha de Ingreso: mayo-2012
Mensajes: 7
Antigüedad: 12 años, 6 meses
Puntos: 0
Pregunta Cómo calculo height de un div y se lo pongo al css?

Hola a todos! necesitaba que me ayudasen con un problema
Lo que pasa es que tengo mi sitio web, y en la barra lateral con todos los botones de navegación, hay un div el cual tiene un título fijo, y un contenido de texto variable, el problema es que necesito saber el HEIGHT de ese div, ya que está medio escondido en la página, y aparece cuando paso el cursor sobre él con un MARGIN-TOP, la idea es que el valor del MARGIN-TOP que defino por CSS a ese div, sea igual a su HEIGHT, es decir, según la altura del div, se extenderá el div y aparecerá en pantalla.

Para dar un idea iré al grano
Podría medir el HEIGHT de ese div, con un Javascript, y el valor que me dé, lo uso en el MARGIN-TOP en CSS, y yo no me domino con Javascript :s
He encontrado varios resultados en google de cómo medir el height de un div con Javascript, pero ninguno me deja claro cómo introducir ese valor, en el valor de un tag del CSS (en este caso, el Margin-top)

Dejaré aquí el código para dejarlo más claro

Código CSS:
Ver original
  1. #descripcion{
  2.     background-color:rgba(255,255,255,0.7);
  3.     filter:alpha(opacity=70);
  4.     position:fixed;
  5.     top:100%;
  6.     margin-top:-65px;
  7.     padding:6px;
  8.     height:75px; /*este height siempre será 75px, porque es para que se vea el titulo*/
  9.     width:275px;
  10.     overflow:hidden;
  11.     -webkit-transform: rotate(4deg);
  12.     -moz-transform: rotate(4deg);
  13.     -transition: all 0.35s ease;
  14.     -webkit-transition: all 0.35s ease;
  15.     -moz-transition: all 0.35s ease;
  16. }  
  17.  
  18.     #descripcion h1{margin-top:10px;font-size:28px;}
  19.    
  20. #descripcion:hover{
  21.     width:275px;
  22.     height:250px; /*por ahora dejo fijo el valor del height, pero debería estar en "auto" supuestamente*/
  23.     margin-top:-250px; /*el margin-top que debería tener el mismo valor que tiene el HEIGHT estando en "auto")
  24.    
  25.     -transition: all 0.5s ease-out;
  26.     -webkit-transition: all 0.5s ease-out;
  27.     -moz-transition: all 0.5s ease-out;
  28.     -webkit-transform: rotate(0deg);
  29.     -moz-transform: rotate(0deg);
  30. }

Y en cuanto al html

Código HTML:
Ver original
  1. <div id="descripcion">
  2. <h1><b>Título</b></h1>
  3. <div id="metadescription"><h7><i>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores.</i></h7></div>
  4. </div>

Se los agradezco de antemano