html - how to do fixed nav, footer and content of remaining height without javascript or display:table? -

ऐसे कुछ काम करना जो इस प्रकार के लेआउट की आवश्यकता होती है:

मुझे स्क्रीन पर शेष स्थान का निहित आकार रखने के लिए सामग्री की आवश्यकता है। मैंने कई चीजों की कोशिश की

  & lt; div id = "wrapper" & gt; & Lt; div id = "header" & gt; & Lt; / div & gt; & Lt; div id = "content" & gt; & Lt; / div & gt; & lt;! - / content - & gt; & Lt; div id = "footer" & gt; & Lt; / div & gt; & Lt; / div & gt;   
 यह प्रदर्शन तालिका तकनीक के साथ काम करता है:  
  #wrapper {display: table; ऊंचाई: 100%; चौड़ाई: 100%; पृष्ठभूमि: पीले;} # हेडर {डिस्प्ले: टेबल-पंक्ति; पृष्ठभूमि: काला; ऊंचाई: 50 पीएक्स;} # कंटेनर {प्रदर्शन: टेबल-पंक्ति; ऊंचाई: 100%} #footer {display: table-row; background: black; ऊंचाई: 50 पीएक्स;}   
 लेकिन इसके बिना मैं इसे कैसे कर सकता हूं?  
  #wrapper {width: 100%; ऊंचाई: 100%; स्थिति: रिश्तेदार; न्यूनतम ऊंचाई: 800px;} #header {स्थिति: रिश्तेदार; चौड़ाई: 100%; ऊंचाई: 42 पीएक्स;} # फुटर {ऊँचाई: 45 पीएक्स; चौड़ाई: 100%; पृष्ठभूमि: # 000; स्थिति: पूर्ण; नीचे: 0; अतिप्रवाह- y: छिपी;}   
 मुझे भी सामग्री को स्थिति नहीं चाहिए: निरपेक्ष   
 
 
 यह काम कर सकता है, यदि आप निश्चित ऊंचाई के साथ रह सकते हैं:  
  body, html, #wrapper, #content {height: 100%; मार्जिन: 0; पैडिंग: 0; } #header, #footer {स्थिति: रिश्तेदार; ऊंचाई: 42 पिक्सेल; पृष्ठभूमि: लाल; } # सामग्री {ऊंचाई: ऑटो; न्यूनतम ऊंचाई: 100%; मार्जिन: -42 पीएक्स 0; पैडिंग: 42 पीएक्स 0; -मोज़ बॉक्स-आकार: सीमा-बॉक्स; बॉक्स-आकार: सीमा-बॉक्स; }   
 यहां है।