Limite la altura del DIV secundario a la altura del DIV principal con un hermano variable

Tengo un contenedor <div> with a specified height, and contained within are two more DIVs, on for introductory copy that will vary (entered by the client), and another to list out various features.

I want the features <div> to automatically fill the remaining space in the parent, and then scroll out the overflow.

¿Cómo puedo hacer eso?

CSS:

#article {
    width:940px;
    height:500px
}

#article-content {
    margin: 20px 0;
}

#article-features {
    height:100%;
    overflow-x: auto;
}

jsviolín

preguntado el 31 de julio de 12 a las 13:07

1 Respuestas

No way to do it with HTML4 other than relying on javascript to dynamically change the height of the bottom div based upon calculation (parent_height - sibling_height).

Puedes mirar esto: CSS HTML: la altura de DIV llena el espacio restante

With HTML5 you may use Flexbox to use the remaining space. Note that there are some limitations but it can answer your requirements. See http://caniuse.com/#feat=flexbox.

contestado el 23 de mayo de 17 a las 12:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.