पूर्ण div पृष्ठ

Question

के साथ स्क्रॉल नहीं करता है नीचे दिए गए पहेली से, मैं 'आंतरिक-नेविगेशन' div को पूरी तरह से स्थानांतरित करने की कोशिश कर रहा हूं, इसलिए यह 'तुलना-प्रदर्शन' बॉक्स में तय रहता है। मेरी समस्या यह है कि जब आप स्क्रॉल करते हैं, तो 'आंतरिक-नेविगेशन' div निश्चित नहीं रहता है। मैं इस समस्या का समाधान कैसे कर सकता हूं?

http://jsfiddle.net/Cd9eZ/

एचटीएमएल कोड

<div class="compare-display"> 
    <div class="table"> 
     <div class="source-compare col-50"> 
      <div class="page"></div> 
     </div> 
     <div class="navigation-compare"> 
      <div class="inner-navigation"></div> 
     </div> 
     <div class="target-compare col-50"> 
      <div class="page"></div> 
     </div> 
    </div> 
</div> 

सीएसएस कोड

.table { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
.table > div { 
    display: table-cell; 
    vertical-align: top; 
} 
.table > .col-50 { 
    width: 50%; 
    background: green; 
} 
.compare-display { 
    position: relative; 
    overflow: auto; 
    height: 200px; 
} 
.compare-display .navigation-compare { 
    min-width: 50px; 
    background: blue; 

} 
.compare-display .page { 
    margin: 20px; 
    height: 500px; 
    background: orange; 
} 
.compare-display .inner-navigation { 
    position: absolute; 
    width: 50px; 
    top: 0; 
    bottom: 0; 
    background: red; 
} 

Answer 1

'.compare-display' के आस-पास एक निश्चित div लपेटें और '.compare-display' से संबंधित स्थिति को हटा दें।

तो जैसा

:

jsfiddle.net/Cd9eZ/4

.compare-wrapper { 
    position:fixed; 
} 

.compare-display { 
    /*position: relative;*/ 
} 

<div class="compare-wrapper"> 
    <div class="compare-display">...</div> 
</div> 

Answer 2

लगता है कि तुम position:fixed बजाय position:absolute हैं:

यहाँ मेरी बेला है।

Fiddle

CSS Position Documentation

Answer 3

इस तुम क्या इरादा था?

http://jsfiddle.net/Cd9eZ/3/

.compare-display .inner-navigation { 
    **position: fixed;** 
    width: 50px; 
    top: 0; 
    bottom: 0; 
    background: red; 
} 

आप नेविगेशन विंडो से चिपका चाहते हैं, पूर्ण काम नहीं करेगा। निरपेक्ष पृष्ठ प्रवाह से तत्व को नहीं हटाता है, इसलिए स्क्रॉलिंग हमेशा एक पूरी तरह से तैनात तत्व को स्थानांतरित करेगी क्योंकि संदर्भ का फ्रेम पृष्ठ स्वयं है, और विंडो नहीं है।

फिक्स्ड तत्व पूरी तरह से पृष्ठ प्रवाह से हटा दिए जाते हैं और खिड़की की जगह पर ही रूट होते हैं।