पूर्ण व्यूपोर्ट ऊंचाई स्केलिंग div बस css no js ... संभव है?

Question

ठीक है, मैं एक div को स्केल करने की कोशिश कर रहा हूं और ऊंचाई हमेशा व्यूपोर्ट की ऊंचाई है। मैं अपने उदाहरणों से जुड़ने जा रहा हूं क्योंकि इसे कुछ समझाने की जरूरत है।

www.madmediablitz.com/tv/precentdemo.html

ऊपर दिया गया लिंक निकटतम मैं एक समाधान पर आए हैं और मुझे लगता है कि किसी को यहाँ यह आसान तय करने के लिए मिल जाएगा आशा करती हूं कि है। मैं क्या करना चाहता हूं टीवी हमेशा व्यूपोर्ट की ऊंचाई (डिग्री, न्यूनतम ऊंचाई: ~ 400 पीएक्स; अधिकतम ऊंचाई: ~ 700 पीएक्स;) है। जिस कोड का मैंने उपयोग किया वह http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ पर आधारित है।

www.madmediablitz.com/tv/precentdemo_alt.html

यह एक है कि मैं क्या होने के लिए नहीं करना चाहती है। यदि आप अपनी खिड़की का आकार बदलते हैं तो आप देखेंगे कि यह आनुपातिक रूप से स्केल नहीं करता है।

मैं इन दोनों को लगभग 2 दिनों के लिए आजमा रहा हूं और मैं इसे काम करने में सक्षम नहीं हूं। मैं सचमुच मदद के लिए प्रार्थना कर रहा हूं जैसा कि मुझे लगता है, यह बहुत जटिल नहीं है।

Answer 1

html, body { 
    height: 100%; 
} 

this आलेख पढ़ें।

Answer 2

आप एक काफी आश्चर्य की बात जिस तरह से मुझे शंका में पूर्ण स्थिति का उपयोग कर सकते हैं:

div#element { 
    position: relative; 
} 

img.vertical { 
    position: absolute; 
    top: 0; // no need for px or em 
    bottom: 0; 
} 

एक अनुपालन करने वाले ब्राउज़र, दोनों ऊपर और नीचे निर्देशों का अनुपालन करने के लिए वास्तव में एक पूरी ऊंचाई के प्रबंधन की कोशिश करनी चाहिए।

Answer 3

कृपया इस देखें: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

<div id="welcome"> 
    your content on screen 1 
</div> 

<div id="projects"> 
    your content on screen 2 
</div> 
div#welcome { 
    height: 100vh; 
    background: black; 
} 

div#projects { 
    height: 100vh; 
    background: yellow; 
} 

यह है कि।