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

Question

निम्नलिखित 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?

Comments

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

— पैटी इस्सा

कोई विशेष कारण नहीं, मुझे चीजों को निर्दिष्ट करने की आदत है

— क्रिस मीक

यदि आप top: 0;इसे हटाते हैं तो बस काम नहीं करता है।

— ब्रेउल

जेएस के बिना कैल्क करने के लिए innerHeight, यह कठिन होगा। दुर्भाग्य से position:fixedकंटेनर के अंदर काम नहीं करता है क्योंकि यह प्रवाह से बाहर है इसलिए यह 'वर्कअराउंड' भी काम नहीं करेगा :(

— राफेलडीडीएल

Answer 1

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

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

सीएसएस:

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

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

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
  float: left;
  margin-right: 16px;
}

.inner {
  position: relative;
  height: auto;
}

.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  height: 100%;
  background: blue;
}

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

<div class="container">
  <div class="inner">
    <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>
</div>

http://jsfiddle.net/M5cTN/

Comments

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

— क्रिस मीक

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

— paulvs

Answer 2

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वह थसेन हो जाता है, #messतो स्क्रीन पर अपनी स्थिति रखता है, जबकि उसके #dataनीचे स्क्रॉल होता है।

Comments

निश्चित स्थिति ब्राउज़र के सापेक्ष तत्व को स्थिति देगी, जो वांछित परिणाम नहीं हो सकता है।

— अवंद अमीरी

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

— हर्बी श्टिनी

transform: translate3d(0,0,0);माता-पिता के position: fixedलिए माता-पिता के सापेक्ष बनने का कारण होगा । स्रोत कोडरवाल.com

— p/

Answer 3

तो gaiour सही है, लेकिन यदि आप एक पूर्ण ऊंचाई आइटम की तलाश कर रहे हैं जो सामग्री के साथ स्क्रॉल नहीं करता है, लेकिन वास्तव में कंटेनर की ऊंचाई है, तो यहां ठीक है। एक ऐसी ऊंचाई वाले माता-पिता के पास जो अतिप्रवाह का कारण बनता है, एक कंटेंट कंटेनर जिसमें 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%;
}

Comments

दुर्भाग्य से, यदि नीले रंग के डिव को उसके कंटेनर के दाईं ओर स्थित किया जाता है, तो वह अपने स्क्रॉलबार को छुपाता है।

— पेपिलॉन

Answer 4

मैं इस स्थिति में भाग गया और एक अतिरिक्त div बनाना अव्यवहारिक था। मैं सिर्फ full-heightdiv स्थापित करने के लिए समाप्त हो गयाheight: 10000%; overflow: hidden;

स्पष्ट रूप से सबसे साफ समाधान नहीं है, लेकिन यह वास्तव में तेजी से काम करता है।