सीएसएस - स्क्रॉल के साथ बॉक्स में पैडिंग लागू करना, नीचे-पैडिंग

Question

काम नहीं करता है जब मैं ओवरफ्लो-वाई का उपयोग करता हूं: बॉक्स पर ऑटो का उपयोग करने के लिए मुझे नीचे-पैडिंग नहीं मिल सकती है।

HTML:

<div id="container"> 
    <div id="some_info"></div> 
</div> 

सीएसएस:

#container { 
    padding: 3em; 
    overflow-x: hidden; 
    overflow-y: auto; 
    width: 300px; 
    height: 300px; 
    background: red; 
} 

#some_info { 
    height: 900px; 
    background: #000; 
} 

फिडल: http://jsfiddle.net/rwgZu/

संपादित करें: मैं फ़ायरफ़ॉक्स

Answer 1

एक और समाधान का इस्तेमाल किया।

#container:after { 
    content: ""; 
    display: block; 
    height: 50px; 
    width: 100%; 
} 

एफएफ, क्रोम, आईई 8-10 में काम करना।

Answer 2

यहाँ का उपयोग कर रहा है एक संभव दृष्टिकोण है कि पूरी तरह से काम कर रहा है:

#container { 
    overflow-x: hidden; 
    overflow-y: auto; 
    width: 300px; 
    height: 300px; 
} 

#some_info { 
    height: 900px; 
    background: #000; 
    border: 3em solid red; 
} 

Answer 3

Demo

हाय अब इस सीएसएस के लिए अतिरिक्त DIVs बिना

#container { 
    padding: 3em; 
    overflow-x: hidden; 
    overflow-y: auto; 
    width: 300px; 
    height: 300px; 
    background: red; 
    padding-bottom:0; // add this line in your css 
} 

#some_info { 
    height: 900px; 
    background: #000; 
    margin-bottom:3em; // add this line in your css 
} 

Demo

Answer 4

यह न केवल पैडिंग के साथ है। दाएं पैडिंग/सीमा/दूरी को भी अनदेखा किया जाता है (आप इसे अपने उदाहरण में नहीं देख सकते हैं क्योंकि इसमें कोई सामग्री नहीं है, और चौड़ाई स्क्रॉल नहीं हो रही है)

ऊपर दिए गए सभी उत्तर क्रोम 43 में विफल हो जाते हैं, 3 स्क्रॉलबार तक उत्पन्न होते हैं ! या यदि सामग्री #some_info बहती है।

उदाहरण: http://jsfiddle.net/LwujL3ad/

यदि यह आप के लिए काम किया है, यह शायद इसलिए है क्योंकि सामग्री के रूप में व्यापक स्क्रॉल तत्व के रूप में नहीं था, या आकार तय की।

सही समाधान है:

सेट #some जानकारी प्रदर्शित करने के लिए: टेबल, और यह करने के लिए गद्दी या बॉर्डर जोड़ना, स्क्रॉल कंटेनर के लिए नहीं।

#container { 
    overflow: scroll; 
    width: 300px; 
    height: 300px; 
    background: red; 
    padding-bottom:0; 
} 

    #some_info { 
    display:table; 
    border: solid 3em red; 
    height: 900px; 
    background: #000; 
    margin-bottom:3em; 
    color: white; 
} 

डेमो: http://jsfiddle.net/juh7802x/

केवल तत्व यह है कि असफल नहीं होता है, और किसी भी सीमा और गद्दी आप विभाजक के रूप में वहाँ में जोड़ने का सम्मान करता है एक टेबल है।

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

एक गतिशील समाधान (कंटेनर और सामग्री दोनों) के लिए स्क्रॉलिंग कंटेनर के अंदर तत्वों के कंटेनर को प्रदर्शित करने के लिए सेट करें: तालिका।

Answer 5

मुझे पार्टी के लिए देर हो चुकी है, लेकिन मैंने सोचा कि यह एक अलग समाधान जोड़ने लायक था जो उपरोक्त उठाए गए कुछ चिंताओं को संबोधित करता है।

मैं यहां आया था कि @ फिलिप ने अलेक्जेंड्रे लैवॉ के समाधान के जवाब में उठाया था: मेरे पास कंटेनर के अंदर गतिशील रूप से जेनरेट की गई सामग्री है, इसलिए मैं #some_info जैसे विशिष्ट div नाम पर स्टाइल लागू नहीं कर सकता।

खुशी से, ब्राउज़र का समर्थन करने वाले ब्राउज़र के लिए एक आसान समाधान है: कंटेनर में नीचे पैडिंग लगाने के बजाय कंटेनर के अंदर अंतिम बच्चे तत्व को नीचे मार्जिन लागू करें।

#container > :last-child { 
    margin-bottom: 3em; 
} 

जब तक कंटेनर div में अंतिम बाल तत्व ब्लॉक-स्तर तत्व है, तो यह चाल चलनी चाहिए।

डेमो: http://jsfiddle.net/rwgZu/240/

पी.एस. यदि पैडिंग के नीचे स्क्रॉल करने में फ़ायरफ़ॉक्स की विफलता वास्तव में एक बग है (जैसा कि @ केली द्वारा सुझाया गया है), यह अभी भी फ़ायरफ़ॉक्स 47.0 के रूप में तय नहीं किया गया है। निराशा होती! इंटरनेट एक्सप्लोरर 11.0.9600.17843 एक ही व्यवहार प्रदर्शित करता है। (गूगल क्रोम, इसके विपरीत में, नीचे गद्दी के रूप में उम्मीद को दर्शाता है।)

Answer 6

पर isHristov's answer आधार पर:

#container { 
    padding: 3em 3em 0 3em; /* padding-bottom: 0 */ 
    overflow-x: hidden; 
    overflow-y: auto; 
    width: 300px; 
    height: 300px; 
    background: red; 
} 

#container:after { 
    content: ""; 
    display: block; 
    height: 0; 
    width: 100%; 
    margin-bottom: 3em; /* length you wanted on padding-bottom */ 
} 

हालांकि, उनकी समाधान ब्राउज़रों कि इस स्थिति ठीक से संभाल में अतिरिक्त जगह कहते हैं।

Dan Robinson's answer तब तक बहुत अच्छा है जब तक आपके पास # कंटेनर में कई तत्व नहीं हैं, जो गतिशील रूप से दिखाए गए/छुपाए गए हैं। उस स्थिति में: अंतिम बच्चा एक छिपे तत्व को लक्षित कर सकता है और इसका कोई प्रभाव नहीं पड़ता है।

Answer 7

सामान्य रूप से पैरेंट div को स्टाइल करें और आंतरिक div को वह करें जो आप करना चाहते हैं।

#container पर overflow-x और overflow निकालें, 100% को height बदल सकते हैं और पर #some_info

#container { 
    padding: 3em; 
    width: 300px; 
    height: 300px; 
    background: red; 
} 

#some_info { 
    height: 100%; 
    background: #000; 
    overflow-y:scroll; 
    width:100%; 
} 

कार्य डेमो overflow-y:scroll; जोड़ें: http://jsfiddle.net/9yuohxuh/