Alto en CSS

[indie_rok]

Hola amigos!

Pregunta un poco novata, pero aun no la resuelvo.

Yo siempre trabajo con medidas absolutas, pero con estas cosas del responsive design, ahora empiezo a trabajar con medidas relativas.

Para definir un div "cuadro", siempre hacia esto:

Código:

#cuadro
  {
	  background-color:#999;
	  width:300px;
	  height:300px;
  }

Ahora quiero hacer esto:

Código:

#cuadro
  {
	  background-color:#999;
	  width:20%;
	  height:20%;
  }

Pero me llevo la mala suerte que no me marca el cuadro, si no un rectángulo y la altura esta en base al contenido del texto, no a la dimensión que le marco.

Alguien me ayuda?

Saludo

[faillure]

relacion de aspecto css: https://www.google.es/search?q=relación+de+aspecto+css
aspect ratio css: https://www.google.es/search?q=aspect+ratio+css

Y en http://ksesocss.blogspot.com/2013/08/aspect-ratios-css.html tienes unos ejemplos y explican el cómo y el porqué

[pzin]

La altura que defines con una medida relativa, es siempre relativo a la altura del padre de ese elemento. Todos los elementos tienen por defecto una altura automática, que se adapta al contenido (height: aut) por lo que si no defines una altura al padre —ya sea relativa o fija— el hijo nunca crecerá si este está definido con altura relativa, porque es relativo a una altura automática.

[faillure]

0_0
"La altura que defines con una medida relativa, es siempre relativo a la altura del padre de ese elemento"

¿Con todas las relativas o sólo los %?

[pzin]

Cambiamos relativa por porcentual.

[eduardobrutaldeath]

Iniciado por indie_rok

Hola amigos!

Pregunta un poco novata, pero aun no la resuelvo.

Yo siempre trabajo con medidas absolutas, pero con estas cosas del responsive design, ahora empiezo a trabajar con medidas relativas.

Para definir un div "cuadro", siempre hacia esto:

Código:

#cuadro
  {
	  background-color:#999;
	  width:300px;
	  height:300px;
  }

Ahora quiero hacer esto:

Código:

#cuadro
  {
	  background-color:#999;
	  width:20%;
	  height:20%;
  }

Pero me llevo la mala suerte que no me marca el cuadro, si no un rectángulo y la altura esta en base al contenido del texto, no a la dimensión que le marco.

Alguien me ayuda?

Saludo

mmm por lo general a las páginas hechas con porcentajes no se les especifica un HEIGHT, para que de manera automática el contenedor se alargue o achique según el contendido... pero si quieres probar de todas formas tus medidas lo que tendrías que hacer es... ponerle un alto en pixeles al padre y los hijos ya podrían cambiar su alto en porcentajes porque tienen una medida fija (que es el padre) para calcular el porcentaje según el tamaño de su contenedor en pixeles:

Código HTML:

<DIV id="container">
 
 
      <DIV class="loquesea">
      TEXTO
      </DIV>
 
 
</DIV>
 

Código CSS:

#container{
height: 500px;
width: 500px;
}
 
.loquesea{
height: 20%;
width: 20%;
}
 

[faillure]

Dando medidas absolutas al padre lo que quiere hacer

pero con estas cosas del responsive design, ahora empiezo a trabajar con medidas relativas

pasa al cajón de los buenos deseos.

[indie_rok]

jaja muchas gracias por las respuestas.. pero entonces como le doy medidas al contenedor padre? Recuerden que los pixeles varian de monitor a monitor. Y no quisiera usar javascript. Alguna solucion?

Saludos

[indie_rok]

Ya lo arregle. Solamente es cambiar el valor de width y heigth de body

Código:

html,body
{
	width:100%;
	height:100%;
	background-color:black;
	margin:0px;
}