100% ऊंचाई div और overflow: auto

Question

मुझे स्क्रीन के बाईं ओर एक लंबवत मेनू मिला है, और मैं संकल्प की 100% ऊंचाई लेना चाहता हूं, लेकिन अगर div (मेनू के) को और अधिक चाहिए, तो मैं स्क्रॉल दिखाना चाहते हैं। मेरा प्रश्न: मुझे ऊंचाई के साथ एक div मिला है: 100% और अतिप्रवाह ऑटो। मुझे केवल उस div पर स्क्रॉल की आवश्यकता है, लेकिन यह div स्क्रीन के संकल्प का 100% होना चाहिए। अब अगर मैं ऐसा करता हूं, तो स्क्रॉल सभी पेज लेता है, लेकिन अगर मैं div को निश्चित ऊंचाई डालता हूं तो यह सही तरीके से काम करता है। लेकिन मुझे 100% ऊंचाई होने की जरूरत है। बहुत बहुत धन्यवाद!

Answer 1

मैं इस के लिए 2 सामान्य समाधान के बारे में पता:

1) का प्रयोग करें जावास्क्रिप्ट व्यूपोर्ट की ऊंचाई निर्धारित करने और स्पष्ट रूप से (yourMenuDivElement.style.height = document.documentElement.clientHeight; की तर्ज पर जैसे कुछ एक ही करने के लिए तत्व की ऊंचाई निर्धारित करने के लिए आप '। डी को विंडो की ऊंचाई को रीसेट करने के लिए विंडो आकार बदलने के लिए भी सुनिश्चित करना होगा।

2) बहुत आसान सीएसएस-केवल समाधान html और body तत्वों की ऊंचाई निर्धारित करना है दोनों 100% हो। मेरा मानना ​​है कि यह आम तौर पर ठीक काम करता है, हालांकि आपके पास अपने पृष्ठ पर अन्य चीजें हो सकती हैं जो दस्तावेज की ऊंचाई को 100% तक सेट करके नकारात्मक रूप से प्रभावित हो सकती हैं - लेकिन यह निश्चित रूप से कोशिश करने लायक है। सीएसएस होगा कुछ की तरह:

html { 
    height: 100%; 
} 
body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
div#menu { 
    height: 100%; 
    overflow: auto; 
} 

Answer 2

http://cssdesk.com/yxShB http://gearsdigital.com/sandbox/ http://jsfiddle.net/WB4Qc/

सफलतापूर्वक परीक्षण किया:

OSX

• एफएफ 3.6
• सफारी 4 + 5
• क्रोम 47,0

WIN7

• IE 7
• आईई 8
• एफएफ 3,5

ऊपर मेरी उदाहरण देखें। कोड ठीक काम करता है ... विंडो का आकार बदलने का प्रयास करें। ब्राउज़र ब्राउज़र के आखिरी सूची तत्व तक पहुंचने के बाद आप देखेंगे कि मेनू div पर एक स्क्रॉलबार दिखाई देता है।

एचटीएमएल:

<div id="menu"> 
    <ul> 
     <li>owepwew</li> 
     <li>owepwew</li> 
     <li>owepwew</li> 
     <li>owepwew</li> 
     <li>owepwew</li> 
     <li>owepwew</li> 
     <li>owepwew</li> 
     <li>owepwew</li> 
     <li>owepwew</li> 
     <li>owepwew</li> 
     <li>owepwew</li> 
     <li>owepwew</li> 
     <li>owepwew</li> 
     <li>owepwew</li> 
     <li>owepwew</li> 
     <li>owepwew</li> 
    </ul> 
</div>        

Css:

* {margin:0;padding:0;} 
    html, body{ 
     height:100%; 
     background:#eee; 
    } 
    #menu { 
     background:#ccc; 
     width:220px; 
     height:100%; 
    } 
    #menu ul { 
     height: 100%; 
     overflow: auto; 
    }    

Answer 3

, इस के लिए एक farily सरल जवाब है ऊंचाई का उपयोग कर: सीएसएस में दोनों HTML और शरीर चयनकर्ताओं पर 100%, आप को प्रभावी ढंग से बता सकते हैं मेनू ऊंचाई का 100% होना चाहिए, लेकिन जब इसे आवश्यकता हो तब स्क्रॉल करें।

मैंने आपके लिए यहां jsFiddle.net पर एक उदाहरण दिया है।(प्रभाव देखने के लिए परिणाम विंडो का आकार बदलने)

आशा है कि यह मदद करता है :)

Answer 4

मैं पृष्ठ की सामग्री के लिए एक "सामग्री" div साथ gearsdigital प्रतिक्रिया पूरा कर दिया है:

http://jsfiddle.net/Guillaume/NnW5r/11/show/

कोड: http://jsfiddle.net/Guillaume/NnW5r/11/

विंडो का आकार बदलें और अगर यह अपनी आवश्यकताओं फिट बैठता है देखने के लिए पेज स्क्रॉल

Answer 5

वर्क्स हर जगह

जे एस

function overflowFillHeight(el,listener){ 
    var sumH = 0; 
    if(el){ 
     var parEls = el.parentNode.childNodes; 
     var style = null; 
     if(parEls.length > 1){ 
      for(var j = 0; j < parEls.length; j++){ 
       if(parEls[j].nodeType != 3){ 
       if(parEls[j] != el){ 

        sumH += parEls[j].clientHeight; 

        if(typeof window.getComputedStyle(parEls[j]) != 'undefined'){ 
         style = window.getComputedStyle(parEls[j]); 
        }else if(typeof parEls[j].currentStyle != 'undefined'){ 
         style = parEls[j].currentStyle; 
        }; 

        if(style){ 
         sumH += parseInt(style.marginTop); 
         sumH += parseInt(style.marginBottom); 
         sumH += parseInt(style.borderTopWidth); 
         sumH += parseInt(style.borderBottomWidth); 
        }; 

       }; 
       }; 
      }; 
     }; 

     style = null; 
     if(typeof window.getComputedStyle(el) != 'undefined'){ 
      style = window.getComputedStyle(el); 
     }else if(typeof el.currentStyle != 'undefined'){ 
      style = el.currentStyle; 
     }; 

     if(style){ 
      sumH += parseInt(style.marginTop); 
      sumH += parseInt(style.marginBottom); 
      sumH += parseInt(style.borderTopWidth); 
      sumH += parseInt(style.borderBottomWidth); 
     }; 

     el.style.height = (el.parentNode.clientHeight - sumH)+'px'; 

     if(!listener){ 
      window.addEventListener('resize',function(){ 
      overflowFillHeight(el,true); 
      },false); 
     }; 
    }; 
}; 

उदाहरण

<!doctype html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Untitled Document</title> 
    <script> 
    function overflowFillHeight(el,listener){ 
     var sumH = 0; 
     if(el){ 
      var parEls = el.parentNode.childNodes; 
      var style = null; 
      if(parEls.length > 1){ 
       for(var j = 0; j < parEls.length; j++){ 
        if(parEls[j].nodeType != 3){ 
        if(parEls[j] != el){ 

         sumH += parEls[j].clientHeight; 

         if(typeof window.getComputedStyle(parEls[j]) != 'undefined'){ 
          style = window.getComputedStyle(parEls[j]); 
         }else if(typeof parEls[j].currentStyle != 'undefined'){ 
          style = parEls[j].currentStyle; 
         }; 

         if(style){ 
          sumH += parseInt(style.marginTop); 
          sumH += parseInt(style.marginBottom); 
          sumH += parseInt(style.borderTopWidth); 
          sumH += parseInt(style.borderBottomWidth); 
         }; 

        }; 
        }; 
       }; 
      }; 

      style = null; 
      if(typeof window.getComputedStyle(el) != 'undefined'){ 
       style = window.getComputedStyle(el); 
      }else if(typeof el.currentStyle != 'undefined'){ 
       style = el.currentStyle; 
      }; 

      if(style){ 
       sumH += parseInt(style.marginTop); 
       sumH += parseInt(style.marginBottom); 
       sumH += parseInt(style.borderTopWidth); 
       sumH += parseInt(style.borderBottomWidth); 
      }; 

      el.style.height = (el.parentNode.clientHeight - sumH)+'px'; 

      if(!listener){ 
       window.addEventListener('resize',function(){ 
       overflowFillHeight(el,true); 
       },false); 
      }; 
     }; 
    }; 
    </script> 
    <style> 
    *{ 
     margin:0px; 
     padding:0px; 
    } 
    html,body{ 
     height:100%; 
    } 
    .g1{ 
     margin-bottom:34px; 
     border:20px double #CCFF00; 
    } 
    </style> 
    </head> 

    <body> 

    <div style="height:100%; background:#F00;"> 
    <div class="g1" style="height:37px; background:#00F;">1</div> 
    <div id="qqq" class="g1" style="background:#39F; overflow:auto; height:300px;"> 
     <div style="height:1000px;">2</div> 
    </div> 
    <div style="height:100px; background:#060;">3</div> 
    </div> 
    <script> 
     overflowFillHeight(document.getElementById('qqq')); 
    </script> 
    </body> 
    </html>