ओवरफ्लो के साथ ऑटो ऊंचाई div और आवश्यक होने पर स्क्रॉल करें

मैं किसी पृष्ठ के लिए कोई वर्टिकल स्क्रॉलिंग वाली वेबसाइट बनाने की कोशिश कर रहा हूं, लेकिन मुझे उस DIV में से एक की आवश्यकता है जो मुझे पृष्ठ के नीचे लंबवत रूप से विस्तारित करना है (अधिकतर), और जब उस सामग्री में फिट नहीं होती है, तो div को लंबवत स्क्रोलर बनाना चाहिए।ओवरफ्लो के साथ ऑटो ऊंचाई div और आवश्यक होने पर स्क्रॉल करें

मैं पहले से ही div के अंदर के लिए सीएसएस this fiddle में पता लगा, स्क्रोलर बनाने जब जरूरत है। मैंने यह भी पता लगाया है कि how to make कंटेनर div पृष्ठ में मौजूद लंबवत स्थान पर कब्जा करने के लिए बढ़ता है। मैं बस उन्हें एक साथ काम नहीं कर सकता!

कृपया ध्यान रखें कि jsfiddle में आप पूरी वेबसाइट की सामग्री को देखने में सक्षम नहीं होंगे और इस अर्थ में आपको दूसरी पहेली के लिए क्या मिलता है, वास्तव में यह नहीं दिखाता कि क्या किया जा रहा है, लेकिन यह काम करता है यद्यपि इरादा है।

बस एक और नोट: क्योंकि वे अलग-अलग पहेलियों हैं, आईडी # कंटेनर div पहली पहेली में है, वह दूसरे उदाहरण का आईडी # डेंटेंट div है।

एक और बात है: एक प्रकार की सामग्री के लिए, यह div लंबवत स्क्रॉल करेगा, लेकिन अन्य प्रकार की सामग्री के लिए, मैं इसे क्षैतिज स्क्रॉल करना चाहता हूं, क्योंकि इसमें एक उत्पाद "स्लाइडर" क्षैतिज रूप से इसके अंदर तत्व प्रदर्शित करेगा DIV।

भी इस फोटो को देखो कृपया क्योंकि यह आसान हो सकता है मैं क्या कहने की कोशिश कर रहा हूँ समझने के लिए: PICTURE

मैं इन विषयों के बारे में अन्य प्रश्न करने के लिए देख करने की कोशिश की, लेकिन कोई भी सभी पहलुओं को कवर करने लग रहा था मैं मैं हल करने की कोशिश कर रहा हूं ...: एस

यदि कुछ और है तो मैं आपको/मुझे मदद करने के लिए प्रदान कर सकता हूं :) इसे समझना, कृपया मुझे बताएं!

धन्यवाद!

EDIT1: तय लिखने की त्रुटियों

EDIT2: स्पष्टीकरण

स्रोत

2012-04-14 Joum

ठीक है, लंबे अनुसंधान के बाद, मैं एक समाधान पाया है कि मैं क्या जरूरत है: http://jsfiddle.net/CqB3d/25/

सीएसएस:

body{ 
margin: 0; 
padding: 0; 
border: 0; 
overflow: hidden; 
height: 100%; 
max-height: 100%; 
} 

#caixa{ 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
} 
#framecontentTop, #framecontentBottom{ 
position: absolute; 
top: 0; 
width: 800px; 
height: 100px; /*Height of top frame div*/ 
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
background-color: navy; 
color: white; 
} 

#framecontentBottom{ 
top: auto; 
bottom: 0; 
height: 110px; /*Height of bottom frame div*/ 
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
background-color: navy; 
color: white; 
} 

#maincontent{ 
position: fixed; 
top: 100px; /*Set top value to HeightOfTopFrameDiv*/ 
margin-left:auto; 
    margin-right: auto; 
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/ 
overflow: auto; 
background: #fff; 
    width: 800px; 
} 

.innertube{ 
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/ 
} 

* html body{ /*IE6 hack*/ 
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/ 
} 

* html #maincontent{ /*IE6 hack*/ 
height: 100%; 
width: 800px; 
}

HTML:

<div id="framecontentBottom"> 
<div class="innertube"> 

<h3>Sample text here</h3> 

</div> 
</div> 


<div id="maincontent"> 
<div class="innertube"> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text... 
</div> 
</div> 
</div>

क्षैतिज चीज़ के साथ अभी तक काम नहीं कर सकता है, लेकिन, यह एक काम प्रगति पर है!

मैंने मूल रूप से "प्रारंभ" बॉक्स-अंदर-बक्से-अंदर-बक्से मॉडल को गिरा दिया और गतिशील ऊंचाई और अतिप्रवाह गुणों के साथ निश्चित स्थिति का उपयोग किया।

आशा है कि इससे पहले भी कोई प्रश्न ढूंढने में मदद मिलेगी!

संपादित करें: यह अंतिम उत्तर है।

स्रोत

2012-04-15 16:55:54 Joum

के लिए जोड़ा चित्र इस प्रयास करें:
सीएसएस:

#content { 
    margin: 0 auto; 
    border: 1px solid red; 
    width:800px; 
    position:absolute; 
    bottom:0px; 
    top:0px; 
    overflow:auto 
}

HTML:

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

ऐसा न करने पर इस मामले में पूर्ण स्थिति की तरह, बस वाई खेल सकते हैं position:relative के साथ, दोनों को माता-पिता और बच्चे को विभाजित करना।

संपादित करें: नीचे काम (मैं तो बस पल के लिए सीएसएस इनलाइन डाल) करना चाहिए:

<div style="margin:0 auto; width:800px; height:100%; overflow:hidden"> 
<div style="border: 1px solid red; width:800px; position:absolute; bottom:0px; top:0px; overflow:auto"> 
...content goes here... 
</div> 
</div>

स्रोत

2012-04-15 02:52:31 preahkumpii

यह सामग्री के साथ div के * अंदर * के साथ ठीक काम करता है और यह लंबवत स्थान को ओकप्पी करने के लिए आकार बदलता है, लेकिन मैं कंटेनर के अंदर * बढ़ता नहीं हूं क्योंकि मुझे इसकी आवश्यकता है ... btw, i मैं आपके संपादन की कोशिश कर रहा हूं .... बात यह है कि आपके दूसरे कोड उदाहरण में पैरेंट div मेरे कोड में किसी अन्य कंटेनर के अंदर है ... ऊपर दिए गए चित्र को एक स्पष्ट विवरण के लिए जांचें ... कोई और विचार? – Joum

yup ... काम नहीं कर रहा है: एस यहां आपके परीक्षण के परिणाम के साथ बेवकूफ है: http://jsfiddle.net/CqB3d/ लाल सीमा div को काले सलाखों के बीच बहती रहना चाहिए और लंबवत स्क्रोलर प्रदर्शित करना चाहिए। और यदि मौके से संकल्प अलग थे, केवल लाल सीमा वाले div * आकार बदलने के लिए * बढ़ने * चाहिए ... मैं पूरी तरह से यहां खो गया हूं: एस डुनो अगर इसकी ऊंचाई: ऑटो सेटिंग जो इस तरह से व्यवहार कर रही है या अगर यह div की सामग्री के साथ कुछ करने के लिए है ... – Joum

-5

मुझे लगता है कि यह बहुत आसान है। सिर्फ इस के बाद इस सीएसएस

.content { 
    width: 100%; 
    height:(what u wanna give); 
    float: left; 
    position: fixed; 
    overflow: auto; 
    overflow-y: auto; 
    overflow-x: none; 
}

का उपयोग सिर्फ इस वर्ग देना div उर जैसे -

<div class="content">your stuff goes in...</div>

स्रोत

2012-05-02 11:22:07

-1

यह वही है मैं अब तक क्या करने में कामयाब रहे है। मुझे लगता है कि यह एक तरह का है जिसे आप खींचने की कोशिश कर रहे हैं। केवल एक चीज यह है कि मैं अभी भी कंटेनर डीआईवी को उचित ऊंचाई असाइन करने का प्रबंधन नहीं कर सकता।

->JSFIDDLE

स्रोत

2012-05-05 03:54:06

jsfiddle लिंक नहीं मिला। अपने उत्तर में कोड पोस्ट करना चाहिए न सिर्फ लिंक –

मुख्य अंक

सुंदर ज्यादा @Joum से सर्वश्रेष्ठ चुना जवाब है, पोस्ट का जवाब हासिल करने की कोशिश की अपने प्रयास तेज करने के रूप में ही जवाब के साथ त्वरित जवाब प्रश्न और वाक्य रचना में चल रही क्या गूढ़ रहस्य से समय की बचत -

उत्तर

सेट करने के लिए स्थिति स्थिति सेट करें, तत्व या div के लिए अपनी पसंद के लिए शीर्ष और नीचे विशेषताओं को सेट करें, जिसे आप अपने मूल तत्व की तुलना में "ऑटो" आकार रखना चाहते हैं और फिर छिपाने के लिए अतिप्रवाह सेट करें।

.YourClass && || #YourId{ 
    position:fixed; 
    top:10px; 
    bottom:10px; 
    width:100%; //Do not forget width 
    overflow-y:auto; 
}

वालाह! स्क्रॉल करने का अवसर बनाए रखते हुए आपको अपने विशेष तत्व के लिए यह आवश्यक है कि आप स्क्रीन आकार और गतिशील आने वाली सामग्री के अनुसार गतिशील ऊंचाई प्राप्त करना चाहते हैं।

स्रोत

2016-05-09 18:54:30 MattOlivos

यह फ्लेक्सबॉक्स के उपयोग के साथ और क्षैतिज absolute स्थिति के बिना एक क्षैतिज समाधान है।

body { 
 
    height: 100vh; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
#left, 
 
#right { 
 
    flex-grow: 1; 
 
} 
 

 
#left { 
 
    background-color: lightgrey; 
 
    flex-basis: 33%; 
 
    flex-shrink: 0; 
 
} 
 

 
#right { 
 
    background-color: aliceblue; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-basis: 66%; 
 
    overflow: scroll; /* other browsers */ 
 
    overflow: overlay; /* Chrome */ 
 
} 
 

 
.item { 
 
    width: 150px; 
 
    background-color: darkseagreen; 
 
    flex-shrink: 0; 
 
    margin-left: 10px; 
 
}

<html> 
 

 
<body> 
 
    <section id="left"></section> 
 
    <section id="right"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    </section> 
 
</body> 
 

 
</html>

स्रोत

2017-07-31 08:27:53 TranslucentCloud

मैं हैरान कोई भी अभी तक उल्लेख किया calc() हूँ।

मैं आपकी विशिष्ट स्थिति को अपने fiddles से बाहर करने में सक्षम नहीं था, लेकिन मैं आपकी समस्या को समझता हूं: आप height: 100% कंटेनर चाहते हैं जो अभी भी overflow-y: auto का उपयोग कर सकता है।

यह बॉक्स से बाहर काम नहीं करता है क्योंकि overflow को कुछ हार्ड-कोडित आकार की बाधा की आवश्यकता होती है जब यह पता लगाना चाहिए कि इसे ओवरफ़्लो को संभालना शुरू करना चाहिए। इसलिए, यदि आप height: 100px के साथ गए, तो यह अपेक्षित काम करेगा।

अच्छी खबर that calc() can help है, लेकिन यह height: 100% जितनी आसान नहीं है।

calc() आपको माप की मनमानी इकाइयों को गठबंधन करने देता है।

तो, स्थिति आप चित्र में वर्णन के लिए आप में शामिल हैं:

के बाद से ऊपर और गुलाबी div नीचे सभी तत्वों को एक ज्ञात ऊंचाई के हैं (मान लीजिए कि, कुल ऊंचाई में 200px है), तो आप उपयोग कर सकते हैं calc OLE कनिष्ठा की ऊंचाई निर्धारित करने के लिए:

height: calc(100vh - 200px);

या, 'ऊंचाई दृश्य ऊंचाई शून्य से 200px की 100% है।'

फिर, overflow-y: auto एक आकर्षण की तरह काम करना चाहिए।

स्रोत

2017-08-18 22:08:29 Brandon

ओवरफ्लो के साथ ऑटो ऊंचाई div और आवश्यक होने पर स्क्रॉल करें

उत्तर

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