स्थिति निरपेक्ष + स्क्रॉल

निम्नलिखित HTML और CSS

.container { 
 
    position: relative; 
 
    border: solid 1px red; 
 
    height: 256px; 
 
    width: 256px; 
 
    overflow: auto; 
 
} 
 
.full-height { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 128px; 
 
    bottom: 0; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="full-height"> 
 
    </div> 
 
</div>

के रूप में वांछित भीतरी div कंटेनर का पूरा सिर तक ले जाता है के साथ

।

.container { 
 
    position: relative; 
 
    border: solid 1px red; 
 
    height: 256px; 
 
    width: 256px; 
 
    overflow: auto; 
 
} 
 
.full-height { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 128px; 
 
    bottom: 0; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="full-height"> 
 
</div> 
 

 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus 
 
    maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate 
 
    placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem. 
 
</div>

फिर कंटेनर स्क्रॉल के रूप में वांछित है, तथापि बिल्कुल तैनात तत्व की तह तक लंगर नहीं रह जाता है: मैं अब इस तरह के रूप में कुछ अन्य, कंटेनर के लिए प्रवाह, सामग्री जोड़ देते हैं तो कंटेनर लेकिन कंटेनर के प्रारंभिक दृश्य-सक्षम तल पर बंद हो जाता है। मेरा सवाल यह है कि; JS का उपयोग किए बिना पूरी कंटेनर तत्व को अपने कंटेनर की पूरी स्क्रॉल ऊंचाई होने का कोई तरीका है?

स्रोत

2013-07-15 Chris Meek

मैं पूछ सकते हैं क्यों आप शीर्ष है: 0; वहाँ भी है ? –

कोई विशेष कारण नहीं है, मेरे पास –

चीजों को निर्दिष्ट करने की आदत है यदि आप 'शीर्ष: 0' हटाते हैं, तो यह अब और काम नहीं करता है। – Brewal

आपको टेक्स्ट को div तत्व में लपेटने की आवश्यकता है और इसमें इसके अंदर स्थित बिल्कुल स्थित तत्व शामिल है।

<div class="container"> 
    <div class="inner"> 
     <div class="full-height"></div> 
     [Your text here] 
    </div> 
</div>

Css:

.inner: { position: relative; height: auto; } 
.full-height: { height: 100%; }

relative के भीतरी div की स्थिति की स्थापना इसके अंदर पूरी तरह से स्थिति तत्वों .container div है, जो एक निश्चित ऊंचाई है पर बजाय यह पर अपनी स्थिति और ऊंचाई के आधार बनाता है । आंतरिक, अपेक्षाकृत स्थान div के बिना, .full-height div हमेशा .container पर आधारित अपने आयामों और स्थिति की गणना करेगा।

http://jsfiddle.net/M5cTN/

स्रोत

2013-07-15 14:59:06 giaour

बेशक, यह वास्तव में कुछ प्रकार की भावना भी बनाता है (जिस तरह से कोई सीएसएस समझ में आता है;)) –

'fill-height' तत्व स्पष्ट रूप से सामग्री के साथ स्क्रॉल कर रहा है, क्या ओपी इसे लंगर नहीं चाहता था? (पृष्ठभूमि छवि में नीली पृष्ठभूमि को बदलकर, आप देख सकते हैं कि मेरा क्या मतलब है जब यह कहता है कि यह एंकर नहीं है http://jsfiddle.net/M5cTN/82/) – paulvs

बहुत बहुत धन्यवाद। खोज के घंटों के बाद, आपका समाधान मिला ... –

position: fixed; आपकी समस्या का समाधान होगा। उदाहरण के लिए, एक निश्चित संदेश क्षेत्र ओवरले के अपने कार्यान्वयन (प्रोग्राम के रूप में आबादी वाले) की समीक्षा:

#mess { 
    position: fixed; 
    background-color: black; 
    top: 20px; 
    right: 50px; 
    height: 10px; 
    width: 600px; 
    z-index: 1000; 
}

और HTML में

<body> 
    <div id="mess"></div> 
    <div id="data"> 
     Much content goes here. 
    </div> 
</body>

जब #data sceen था अब हो जाता है, #mess पर अपनी स्थिति रखता है स्क्रीन, जबकि #data इसके तहत स्क्रॉल करता है।

स्रोत

2014-09-28 21:46:51 flaschbier

+24

फिक्स्ड पोजिशनिंग ब्राउज़र से संबंधित तत्व को स्थिति में रखेगी, जो वांछित परिणाम नहीं हो सकती है। –

यदि आप ऊपर निर्दिष्ट नहीं करते हैं, बाएं, दाएं, नीचे स्थिति निश्चित तत्व विंडो के अपेक्षाकृत अपेक्षाकृत नहीं रखा जाएगा। लेकिन यह निश्चित रूप से सीमित उपयोग है, केवल डिफ़ॉल्ट बाएं शीर्ष स्थिति के लिए, अन्यथा इसे खिड़की के अपेक्षाकृत स्थान दिया जाएगा, इसमें एक और नुकसान भी है, चौड़ाई: 100% या ऊंचाई: 100% विंडो के आयामों के समान होंगे –

तो गेयर सही है, लेकिन यदि आप एक पूर्ण ऊंचाई आइटम की तलाश में हैं जो सामग्री के साथ स्क्रॉल नहीं करता है, लेकिन वास्तव में कंटेनर की ऊंचाई है, तो यह ठीक है। एक माता-पिता को ऊंचाई के साथ रखें जो ओवरफ्लो का कारण बनता है, एक सामग्री कंटेनर जिसमें 100% ऊंचाई और overflow: scroll है, और फिर एक भाई को मूल आकार के अनुसार स्थान दिया जा सकता है, न कि स्क्रॉल तत्व आकार। http://jsfiddle.net/M5cTN/196/

और प्रासंगिक कोड:: यहाँ बेला है

एचटीएमएल:

<div class="container"> 
    <div class="inner"> 
    Lorem ipsum ... 
    </div> 
    <div class="full-height"></div> 
</div>

सीएसएस:

.container{ 
    height: 256px; 
    position: relative; 
} 
.inner{ 
    height: 100%; 
    overflow: scroll; 
} 
.full-height{ 
    position: absolute; 
    left: 0; 
    width: 20%; 
    top: 0; 
    height: 100%; 
}

स्रोत

2015-03-20 20:47:42 TorranceScott

स्थिति निरपेक्ष + स्क्रॉल

उत्तर

संबंधित मुद्दे