जब मैं व्यूपोर्ट की ऊंचाई को पार कर लेता हूं, तो मैं एक निश्चित तत्व की सामग्री को कैसे स्क्रॉल कर सकता हूं?

Question

मैं एक वेब पेज के बाईं ओर divस्थित है fixed, जिसमें मेनू और नेविगेशन लिंक हैं। सीएसएस से इसकी कोई ऊंचाई निर्धारित नहीं है, सामग्री ऊंचाई निर्धारित करती है, चौड़ाई तय की जाती है। समस्या यह है कि यदि सामग्री बहुत अधिक है, divतो खिड़की की ऊंचाई से बड़ा होगा, और सामग्री का हिस्सा दिखाई नहीं देगा। (विंडो को स्क्रॉल करने से मदद नहीं मिलती है, क्योंकि स्थिति है fixedऔर divस्क्रॉल नहीं करेगा।)

मैंने सेट करने की कोशिश की overflow-y:auto;लेकिन वह भी मदद नहीं करता है, div को यह नहीं लगता कि इसका कुछ हिस्सा खिड़की के बाहर है।

मैं यह कैसे कर सकता हूं कि यह सामग्री केवल स्क्रॉल करने योग्य हो, यदि आवश्यक हो, अगर divखिड़की से बाहर लटका हो?

Comments

सीएसएस कैल्क () के साथ एक समाधान यहां पाया जा सकता है: stackoverflow.com/q/29754195/3168107 ।

— शिक्केडियल

calc()एक प्रयोगात्मक तकनीक है और अप्रत्याशित परिणाम हो सकते हैं । यदि आप इसका उपयोग करना चुनते हैं, तो सुनिश्चित करें कि आप अपने लक्षित दर्शकों को जानते हैं और उन ब्राउज़रों में इसका परीक्षण करते हैं।

— c1moore

एक ही समस्या में भाग गया और अधिकतम ऊंचाई जैसे कुछ का इस्तेमाल किया: कैल्क (100vh - 100px); जहाँ मेरा नेवबार और पैडिंग 100px तक बना रहा था

— ज़िया उल रहमान मुग़ल

Answer 1

आप शायद नहीं कर सकते। यहाँ कुछ है जो करीब आता है। नीचे की जगह होने पर आपको इसके चारों ओर प्रवाहित होने के लिए सामग्री नहीं मिलेगी।

http://jsfiddle.net/ThnLk/1289

.stuck {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 180px;
    overflow-y: scroll;
}

आप प्रतिशत ऊंचाई भी कर सकते हैं:

http://jsfiddle.net/ThnLk/1287/

.stuck {
    max-height: 100%;
}

Answer 2

नीचे दिया गया लिंक यह प्रदर्शित करेगा कि मैंने इसे कैसे पूरा किया। बहुत मुश्किल नहीं है - बस कुछ चतुर फ्रंट-एंड देव का उपयोग करना है !!

<div style="position: fixed; bottom: 0%; top: 0%;">

    <div style="overflow-y: scroll; height: 100%;">

       Menu HTML goes in here

    </div>

</div>

http://jsfiddle.net/RyanBrackett/b44Zn/

Comments

अधूरा जवाब। मेरे उपयोग के मामले के लिए - बाहरी डिव शैली है position: fixed; bottom: 0%; top: 0%; overflow: scroll; height: 100vh;, जो बाहरी डिव को सामग्री के आधार पर स्क्रॉल-सक्षम कर देगा।

— किलोगिक

Answer 3

आपको शायद एक आंतरिक div की आवश्यकता है। सीएसएस के साथ है:

.fixed {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   overflow-y: auto;
   width: 200px; // your value
}
.inner {
   min-height: 100%;
}

Answer 4

अपनी स्थिति पर यह प्रयास करें: निश्चित तत्व।

overflow-y: scroll;
max-height: 100%;

Comments

एक जादू की तरह काम किया! धन्यवाद!

— ऋषि देव

Answer 5

यह कुछ फ्लेक्सबॉक्स जादू के साथ बिल्कुल उल्लेखनीय है। एक नजर इस कलम पर ।

आपको इस तरह से सीएसएस की आवश्यकता है:

aside {
  background-color: cyan;
  position: fixed;
  max-height: 100vh;
  width: 25%;
  display: flex;
  flex-direction: column;
}

ul {
  overflow-y: scroll;
}

section {
  width: 75%;
  float: right;
  background: orange;
}

यह IE10 + में काम करेगा

Answer 6

यहाँ शुद्ध HTML और CSS समाधान है।

1. हम स्थिति के साथ नेवबार के लिए एक कंटेनर बॉक्स बनाते हैं: फिक्स्ड; ऊंचाई: 100%;

2. फिर हम ऊंचाई के साथ एक आंतरिक बॉक्स बनाते हैं: 100%; ओवरफ्लो-वाई: स्क्रॉल;

3. इसके बाद, हम उस बॉक्स के अंदर सामग्री डालते हैं।

यहाँ कोड है:

.nav-box{
        position: fixed;
        border: 1px solid #0a2b1d;
        height:100%;
   }
   .inner-box{
        width: 200px;
        height: 100%;
        overflow-y: scroll;
        border: 1px solid #0A246A;
    }
    .tabs{
        border: 3px solid chartreuse;
        color:darkred;
    }
    .content-box p{
      height:50px;
      text-align:center;
    }

<div class="nav-box">
  <div class="inner-box">
    <div class="tabs"><p>Navbar content Start</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content End</p></div>
    </div>
</div>
<div class="content-box">
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
</div>

JsFiddle से लिंक करें:

Answer 7

मैं इसे समाधान के बजाय वर्कअराउंड के रूप में प्रस्तुत कर रहा हूं । यह हर समय काम नहीं कर सकता है। मैंने इसे इस तरह से किया जैसे कि मैं बहुत ही विचित्र वातावरण में आंतरिक उपयोग के लिए एक बहुत ही मूल HTML पृष्ठ कर रहा हूं। मुझे पता है कि MaterializeCSS की तरह पुस्तकालय हैं जो वास्तव में अच्छी नौसेना सलाखों कर सकते हैं। (मैं उनका उपयोग करने जा रहा था, लेकिन यह मेरे पर्यावरण के साथ काम नहीं करता था।)

<div id="nav" style="position:fixed;float:left;overflow-y:hidden;width:10%;"></div>
<div style="margin-left:10%;float:left;overflow-y:auto;width:60%;word-break:break-all;word-wrap:break-word;" id="content"></div>

Answer 8

इसे निर्धारित ऊंचाई के लिए अपने कोड में जोड़ें और एक स्क्रॉल जोड़ें।

.fixedbox {
    max-height: auto;
    overflow-y: scroll;
}

Comments

max-heightauto developer.mozilla.org/en-US/docs/Web/CSS/max-height

— joseantgv

Answer 9

अपने उद्देश्य के लिए, आप बस उपयोग कर सकते हैं

position: absolute;
top: 0%;

और यह अभी भी resizable, स्क्रॉल और उत्तरदायी हो सकता है।