कंटेनर के अंदर स्क्रोल करने योग्य div

मेरे पास निम्न HTML है: http://jsfiddle.net/fMs67/। मैं div1 को div1 के आकार का सम्मान करने और div3 की सामग्री को स्क्रॉल करना चाहता हूं।कंटेनर के अंदर स्क्रोल करने योग्य div

क्या यह संभव है?

धन्यवाद!

अद्यतन-1: http://jsfiddle.net/Wcgvt/:

यह और अधिक उन्नत मामला है कि मैं oversimplified जब मैं प्रश्न पूछा है। मुझे किसी भी तरह की जरूरत है कि हेडर + यह भाई div के आकार को बहने के लिए भाई बहन है।

स्रोत

2012-03-21 shining-light

क्या आपको यह तय हुआ? –

हाय टीसीसी - पूछने के लिए धन्यवाद! असल में मेरा मामला उससे थोड़ा अधिक जटिल था - मैंने एक नए फिडलर के साथ अद्यतन -1 जोड़ा। –

जो आप करने की कोशिश कर रहे हैं वह कठिन ऊंचाई निर्दिष्ट किए बिना बहुत कठिन है, यानी, डी 3-2 को डी 3 की ऊंचाई की अधिकतम ऊंचाई से घटाकर डी 3-1 की ऊंचाई निर्धारित करें। –

माता-पिता को position: relative जोड़ना, और max-height:100%; div2 काम करता है।

<div id="div1" style="height: 500px;position:relative;"> 
    <div id="div2" style="max-height:100%;overflow:auto;border:1px solid red;"> 
     <div id="div3" style="height:1500px;border:5px solid yellow;">hello</div> 
    </div> 
</div> 

</body>

अद्यतन: निम्नलिखित "अद्यतन" उदाहरण और जवाब पता चलता है। http://jsfiddle.net/Wcgvt/181/

box-sizing: border-box का उपयोग करने के लिए गुप्त है, और कुछ पैडिंग दूसरी div ऊंचाई 100% बनाने के लिए है, लेकिन इसकी सामग्री को 50px नीचे ले जाएं। फिर स्क्रॉलबार को रखने के लिए overflow: auto के साथ सामग्री को div में लपेटें। सभी पाठों को चुनने योग्य रखने के लिए जेड-इंडेक्स पर ध्यान दें - उम्मीद है कि यह कई सालों बाद मदद करता है।

स्रोत

2012-03-21 19:24:54

यदि आप पर overflow: scroll डालते हैं, तो div सामग्री को बहुत अधिक जगह ले जाने पर स्क्रॉल करेगा।

स्रोत

2012-03-21 19:26:00

क्या आप यही चाहते हैं?

<body> 
    <div id="div1" style="height: 500px;"> 
    <div id="div2" style="height: inherit; overflow: auto; border:1px solid red;"> 
     <div id="div3" style="height:1500px;border:5px solid yellow;">hello</div> 
    </div> 
    </div>

http://jsfiddle.net/fMs67/1/

स्रोत

2012-03-21 19:27:17

के बजाय overflow:auto, overflow-y:auto प्रयास करें। एक आकर्षण की तरह काम करना चाहिए!

स्रोत

2012-03-21 19:34:05 NotJay

मैंने निश्चित ऊंचाई के साथ (divflow: scroll;) में (div3) जोड़ा है।

बेला देखें: - http://jsfiddle.net/fMs67/10/

स्रोत

2012-03-22 07:05:07

function start() { 
 
\t document.getElementById("textBox1").scrollTop +=5; 
 
    scrolldelay = setTimeout(function() {start();}, 40); 
 
} 
 

 
function stop(){ 
 
\t clearTimeout(scrolldelay); 
 
} 
 

 
function reset(){ 
 
\t var loc = document.getElementById("textBox1").scrollTop; 
 
\t document.getElementById("textBox1").scrollTop -= loc; 
 
\t clearTimeout(scrolldelay); 
 
} 
 
//adjust height of paragraph in css 
 
//element textbox in div 
 
//adjust speed at scrolltop and start

स्रोत

2016-06-23 02:17:25

मैं एक उन्नत संस्करण, ट्रे Copland के बेला के आधार पर बनाया है, मुझे लगता है कि और अधिक जैसे आप चाहते हैं की तरह है। यहां आने वाले लोगों के भविष्य के संदर्भ के लिए यहां जोड़ा गया। Fiddle example

<body> 
<style> 
.modal { 
    height: 390px; 
    border: 5px solid green; 
} 
.heading { 
    padding: 10px; 
} 
.content { 
    height: 300px; 
    overflow:auto; 
    border: 5px solid red; 
} 
.scrollable { 
    height: 1200px; 
    border: 5px solid yellow; 

} 
.footer { 
    height: 2em; 
    padding: .5em; 
} 
</style> 
     <div class="modal"> 
      <div class="heading"> 
      <h4>Heading</h4> 
      </div> 
      <div class="content"> 
       <div class="scrollable" >hello</div> 
      </div> 
      <div class="footer"> 
      Footer 
      </div> 
     </div> 
    </body>

स्रोत

2017-10-03 20:55:52 MichaelC

कंटेनर के अंदर स्क्रोल करने योग्य div

उत्तर

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