एचटीएमएल 5: तीन पंक्तियों निश्चित ऊपर/नीचे और साथ flexbox स्क्रॉल बीच

Question

यह निश्चित header/footer के साथ एक html5 flexbox लेआउट और एक स्क्रॉल article अनुभाग के लिए फ़ायरफ़ॉक्स 24 और क्रोमियम 31 निम्नलिखित की तरह बनाने के लिए संभव है? इस (सरलीकृत)

+----------+ 
| header | 
+----------+ 
| article || 
|   || 
|   || 
|   || 
+----------+ 
| footer | 
+----------+ 

मैं कोशिश की है:

body { 
    display: flex; 
    flex-direction: column; 
} 
header { 
    flex: 1; 
} 
article { 
    flex: 8; 
    overflow-y: scroll; 
} 
footer { 
    flex: 1; 
} 

और अब मैं भरने के लिए article के साथ अंतरिक्ष बने हुए हैं, लेकिन अगर सामग्री ऊंचाई खिड़की ऊंचाई से छोटी है कोशिश कर रहा हूँ, पाद लेख निश्चित नहीं है और अगर यह बड़ा है, देखा जा सकता क्षेत्र से बाहर पाद लेख स्क्रॉल ...

Answer 1

आप शायद बनाने की जरूरत है सुनिश्चित करें कि शरीर 100% अधिक है:

html, body { 
    margin:0; 
    height:100%; 
    min-height:100%; 
} 

मैंने fiddle बनाया।