Limit Child DIV Höhe zu Parent DIV Höhe mit variabler Geschwister

Question

Ich habe einen Container <div> mit einer angegebenen Höhe, und enthalten sind zwei weitere DIVs, für eine einführende Kopie, die variieren wird (vom Client eingegeben), und eine andere Liste aus verschiedenen Funktionen.

Ich möchte die Funktionen <div> automatisch den verbleibenden Platz im übergeordneten füllen, und dann den Überlauf ausrollen.

Wie mache ich das?

CSS:

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

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

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

jsFiddle

Answer 1

keine Möglichkeit, es mit HTML4 anders als unter Berufung auf Javascript zu tun, um dynamisch die Höhe des Bodens zu ändern Div, basierend auf Berechnung (parent_height - sibling_height).

Sie können sich folgendermaßen aussehen: CSS HTML - DIV height fill remaining space

Mit HTML5 können Sie Flexbox verwenden den verbleibenden Platz zu nutzen. Beachten Sie, dass es einige Einschränkungen gibt, aber es kann Ihre Anforderungen erfüllen. Siehe http://caniuse.com/#feat=flexbox.