एक निश्चित 100% ऊंचाई div

Question

के लिए स्क्रॉल करने योग्य सामग्री बनाएं मैं स्क्रोल करने योग्य div बनाना चाहता हूं। मुझे पता है कि यहां बहुत सारे उदाहरण हैं, लेकिन उनमें से कोई भी मेरे लिए काम नहीं करता है।

मेरे पास एक .page क्लास है, जो मेरी मोबाइल की स्क्रीन भरती है। इसके अंदर मेरे पास एक .content div है। इसमें पृष्ठों की सामग्री शामिल है। यह सिर्फ शीर्ष से सामग्री को संरेखित कर रहा है, और अगर सामग्री की सीमाओं से बाहर जा रहा है तो उसे सामग्री को स्क्रॉल करना होगा।

.page{ 
    margin: 0; 
    padding: 0; 
    min-height: 100%; 
    width: 100%; 
    display: block; 
} 
.content{ 
    padding: 4em 0 0 0; 
    overflow-x: hidden; 
    overlofw-y: auto; 
    /*-webkit-overflow-scrolling: touch;*/  
} 

मुझे यह काम करने के लिए क्या करना चाहिए?

अद्यतन

मैं बेला में इसे करने की कोशिश, और यह काम किया है। लेकिन मेरे फोन पर नहीं। इसके कारण मुझे नहीं पता कि समस्या कहां होनी चाहिए।

इसके कारण मैंने अपने पूरे कोड को प्रश्न में संलग्न किया। यह मेरे लिए काम करने के लिए यह बहुत महत्वपूर्ण है।

कृपया मेरी मदद करें। किसी भी मदद के लिए धन्यवाद। :)

Answer 1

क्या आपको यह चाहिए ??

html, body{ 
    height:100%; 
    margin:0; 
    padding:0; 
} 
.page{ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 50%; 
    display: block; border:solid #000 1px 
} 
.content{ 
    padding:0; 
    overflow: scroll; overflow-x:hidden; 
    height:100% 
    /*-webkit-overflow-scrolling: touch;*/  
} 
span{ 
    padding:4em 0 0 0; 
    display:inline-block 
} 

DEMO

उपयोग span टैग यदि आप सामग्री div को गद्दी दे सामग्री div coz के लिए गद्दी निर्दिष्ट करने के लिए यह गणना के रूप में अतिरिक्त ऊंचाई 100% + 4em तो ..

और सुनिश्चित करें कि आप अपने पृष्ठ में height:100% का उपयोग करना चाहते हैं, तो आप html और body ऊंचाई 100% के रूप में निर्दिष्ट कर रहे हैं।

Answer 2

आपको इसके लिए विंडो ऊंचाई प्राप्त करने की आवश्यकता है और इसे .page के लिए सेट करने की आवश्यकता है। वैसे भी, आपको इसके लिए कुछ जावास्क्रिप्ट जोड़ने की आवश्यकता हो सकती है। मैं समाधान के लिए jQuery का इस्तेमाल किया। [आप अन्य पुस्तकालय का उपयोग कर सकते हैं, यह आपके ऊपर है। मैं तुम्हें इस समाधान] का सुझाव दे रहा हूँ

यहाँ मार्कअप है:

<div class="page"> 
    <div class="content"> 

    </div> 
</div> 

सीएसएस:

* { margin:0; padding:0 } /* using * for demo _ you should use proper reset */ 
html, body { height:100%; height:100% } 
body { height:5000px; background-color:#F7F7F7; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:1.6em } 
.page { background:#A2A2A2; width:200px; height:600px; overflow-y:scroll; position:fixed } 
.content { background-color:#4D4D4D; padding:10px; color:#B7B7B7; } 

जे एस:

$('document').ready(function(){ 
    var wHeight = $(window).height(); 
    $('.page').css({ 
     'height' : wHeight + 'px' 
    }); 
}); 

बस इस बेला लिंक देखें - (लाइव डेमो) - http://jsfiddle.net/LZT7B/