entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Condiciones para que la propiedad height tenga efecto con CSS

Deseo que el DIV#vertical ocupe todo el espacio vertical de la ventana, aunque ya tiene height:100% no funciona ¿porqué?

<html>
    <head></head>
    <body>
        <div id='vertical' stlye='background:blue;height:100%'></div>
    </body>
</html>

4 Respuestas

1voto

Peter Puntos150460

Los contenedores ancestros del div deben tambien tener una altura declarada:

<html style='height: 50%;'>
    <body style='height: 50%;'>

0voto

roel_magdaleno Puntos380

Si tienes un id dentro del div, ¿por qué no agregas el código CSS en un archivo .css? Ahora, la solución de tu problema sería un position:absolute; para eso tu estilo debería estar así:

body{
  height:100%;
  margin:0 auto;
}

#vertical{
  position:absolute;
  width:50px /*Aqui lo que gustes darle de ancho*/
  height:100%;
  background:blue;
}

Mira como se ve en este enlace: http://jsfiddle.net/8jTXN/

1voto

Te recomendaria que pongas en una hoja de estilo, y aparte tenes un error sintactico porque no cerraste con ; en height.

Por otro lado, si pones que tenga un alto de 100% y no pones nada adentro del div, tu div #vertical va a ser una linea.

por ejemplo proba esto:

<!---<div id='vertical' stlye='background:blue;height:100%;'></div>-->
<div id='vertical' stlye='background:blue;height:100%',border:3px solid red;'></div>
<!--- ahora vas a ver que se te creo una linea de color rojo con 3x de ancho.-->

ahora proba haciendo esto:

<div id='vertical' stlye='background:blue;height:600px'></div>
<!--- vas a ver que se te completo con rellegno azul un ancho de 600px-->

Ahora si voas no le queres especificar un alto determinado proque queres que eso se vaya adaptando segun el contenido, tendrias que crearle otros divs adentro con un alto determinado para que ese div padre se vaya adaptando..

espero te sirva.. saludos!

1voto

Fitosis Puntos160

Lo más fácil es encerrar el div con altura 100% dentro de un div con position relative

.div-contenedor{
  width:300px;
  height: 300px;
 position:relative;
}
.div-contenido-absolute{
  width:300px;
  height: 100%;
  position:absolute;
}

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta