Css display respetar altura
Como puedo hacer que un div display: inline-block respete una medida relativa de altura?
1 Respuesta
No veo que haya ningún problema con el display:inline-block y las medidas de alto relativas. Incluso he hecho una prueba usando este código:
#prueba {
background-color: yellow;
margin: 100px;
width: 30em;
height: 20em;
display: inline-block;
}y va correctamente, mostrando el div en su sitio y con sus medidas..
Porque supongo que con medidas relativas te refieres a usar unidades em o rem, ¿Verdad?
No te referirás a porcentajes, en cuyo caso cambia todo. Si a casa, mándame el código que estás usando.
Miquel
claro el problema que tengo es la medida en porcentajes. Te mando el código.
#contenedor{
vertical-align:top;
margin:0;
padding:0;
display:inline-block;
width:80%;}
.contenido{
margin:0;
padding:0;
display:inline-block;
background-size:100%;
background-position:center;
height:33%;
width:33%;}
Visto. Cuando pones un alto en porcentajes, estos se calculan respecto al alto del elemento contenedor. Y es necesario que este tenga una altura explícita, no automática. Si no, el navegador le da el valor auto.
Si quieres más información, aquí tienes un link con explicaciones:
<a>http://librosweb.es/referencia_css/height.html</a>
De modo que, lo siento, pero si quieres un contenido con una altura del 33% deberás darle un alto al contenedor en pixeles o em.
Miquel
.
Hay una opción para usar porcentajes en un div, y es empezar por definir el height desde el elemento primero de todos (el body), y también el html. Así:
html, body { height: 100%; }Y así todos sus descendientes se ajustan bien, porque ya tienen su contenedor con el alto definido.
