Div की ऊँचाई 100% है और सामग्री फिट करने के लिए विस्तार करती है

172

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

यहाँ मेरे CSS का सरलीकरण किया गया है:

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

एक बार जब मैं पृष्ठ को स्क्रॉल करता हूं, तो कालापन समाप्त हो जाता है और सामग्री लाल पृष्ठभूमि पर बहती है। इससे कोई फर्क नहीं पड़ता है कि क्या मैं #some_div पर रिश्तेदार को पूर्ण या पूर्ण को सेट करता हूं, समस्या किसी भी तरह से होती है। #Some_div के अंदर की सामग्री ज्यादातर पूरी तरह से तैनात है, और यह गतिशील रूप से एक डेटाबेस से उत्पन्न होती है, इसलिए इसकी ऊंचाई अग्रिम में नहीं जानी जा सकती है।

संपादित करें: यहाँ समस्या का एक स्क्रीनशॉट है: div समस्या

— एक छोटा सा सिक्का
स्रोत

यह कुछ हफ्ते पहले पूछा गया था। मैं देखूंगा कि क्या मुझे वह प्रश्न मिल सकता है। मेरा मानना है कि मैंने इस पर टिप्पणी की। संपादित करें मेरा मानना है कि आपका प्रश्न इसके समान है: stackoverflow.com/questions/9398313/…

— jmbertucci

कृपया बेहतर समझ के लिए अपने कोड

— सन्दीप

क्या आप अपना पूरा कोड pls

— स्वेन बिडर

23

आप php कोड, सीएसएस और जावास्क्रिप्ट की मेरी सभी हजारों लाइनें चाहते हैं? मैंने सीएसएस के हिस्से को पोस्ट किया जो प्रश्न के लिए प्रासंगिक था ...

— जोय

2

NECROPOST एक GO: अतिप्रवाह संपत्ति की स्थापना आम तौर पर इस तरह के मुद्दों जहां एक div के अंदर सामग्री यह (अतीत खींच रहा है ठीक करता है overflow: hidden;, overflow: scroll;, आदि)।

— AlbertEngelB

308

यहां आपको सीएसएस शैली में मुख्य पर क्या करना चाहिए div

display: block;
overflow: auto;

और छूना मत height

— जोआओ पिमेंटेल फेरेरा
स्रोत

4

बढ़िया काम किया। मैं जोड़ने के लिए आवश्यक height: 100%करने के लिए html, bodyऔर कंटेनर div यह ऊंचाई को भरने, जब पर्याप्त सामग्री है, हालांकि नहीं था बनाने के लिए।

— निको Huysamen

अद्भुत समाधान लेकिन आप वास्तव में ऊंचाई को छू सकते हैं यदि आपत्तिजनक एक उत्तरदायी खिड़की फिटिंग की तरह कुछ है

— एलेक्सिस

की display: block;जरूरत है? डिव पहले से ही ब्लॉक-स्तरीय तत्व हैं।

— मैक्स हाइबर

यह मेरे लिए एक आंतरिक स्क्रॉलबार जोड़ता है (क्षैतिज और ऊर्ध्वाधर दोनों)

— नाथन एच

यदि आपको अभी भी मूल तत्व बच्चों के तत्वों की तुलना में थोड़ा लंबा है, तो किसी भी अतिरिक्त रिक्त स्थान की जांच करें और / या  , उन्हें हटा दें। लाइन-ऊंचाई को समायोजित करने का भी प्रयास करें। उदाहरण के लिए line-height: 0, मैंने डाला है , क्योंकि मुझे पाठ की आवश्यकता नहीं थी, बस एक छवि दिखाने के लिए।

— जोर्जेटोन

57

सेट heightकरने के लिए autoऔर min-heightकरने के लिए 100%। यह इसे अधिकांश ब्राउज़रों के लिए हल करना चाहिए।

body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}

— मैथ्यू स्पार्कल
स्रोत

3

IMO, इस सवाल का जवाब देता है "मैं कैसे बनाऊं डीआईवाई हमेशा आंतरिक सामग्री को फिट करने के लिए नीचे तक सभी तरह से जाती है?" वर्तमान में चिह्नित उत्तर से बेहतर है, जो केवल यह सुनिश्चित करने के बजाय ओवरफ्लो-स्क्रॉलिंग को चालू करता है कि डिव / बॉडी अपनी सामग्री को फिट करने के लिए फैलता है। +1

— जैमरज़ 858

मेरे केस के लिए काम किया। धन्यवाद!

— टायसन नीरो

यह ध्यान देने योग्य हो सकता है कि किसी कारण से, यह काम नहीं करता heightहै 100%और अगर min-heightहै auto- मैं उम्मीद करूंगा कि वे इस मामले में विनिमेय होंगे, लेकिन ऐसा लगता है कि वे नहीं हैं।

— पीब्रेन

13

आमतौर पर यह समस्या तब आती है जब पेरेंट डिव के बाल तत्व तैरते हैं। यहाँ समस्या का नवीनतम समाधान है:

अपनी CSS फ़ाइल में निम्न श्रेणी को .clearfix के साथ छद्म चयनकर्ता लिखें : के बाद

.clearfix:after {
content: "";
display: table;
clear: both;
}

फिर, अपने HTML में, .clearfix class को अपने पैरेंट डिव में जोड़ें। उदाहरण के लिए:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

यह हमेशा काम करना चाहिए। आप के रूप में वर्ग के नाम पर कॉल कर सकते .group के बजाय .clearfix , के रूप में यह कोड अधिक अर्थ कर देगा। ध्यान दें, दोहरे उद्धरण "" के बीच सामग्री के मूल्य में डॉट या यहां तक कि एक स्थान जोड़ना आवश्यक नहीं है। इसके अलावा, अतिप्रवाह: ऑटो; समस्या को हल कर सकता है, लेकिन यह अन्य समस्याओं का कारण बनता है जैसे कि स्क्रॉल-बार दिखाना और अनुशंसित नहीं है।

स्रोत: लिसा कैटालानो और क्रिस कॉयर का ब्लॉग

— इफ्ती महमूद
स्रोत

8

यदि आप बस छोड़ते हैं height: 100%और वसीयत का उपयोग display:block;करते हैं तो divअंदर की सामग्री जितनी जगह लेगी div। इस तरह सभी पाठ काली पृष्ठभूमि में रहेंगे।

— RonnieVDPoel
स्रोत

कहां इस्तेमाल किया display: block? मुझे आपके सवाल में ऐसा नहीं दिखता।

— ऑर्बिट

मैंने इसे रोनी के सुझाव के बाद #some_div में जोड़ा, लेकिन इसने समस्या को ठीक नहीं किया।

— जोए

1

क्या आप फ्लोट को जोड़ने का प्रयास कर सकते हैं: कोई नहीं; वही #some_div css

— RonnieVDPoel

इसके बजाय float: none;, उपयोग करें clear:both;। यह एक ही काम करता है लेकिन अधिक क्रॉस-ब्राउज़र, @RonnieVDPoel

— Cannicide है

6

यह प्रश्न पुराना हो सकता है, लेकिन यह एक अद्यतन का हकदार है। यहाँ एक और तरीका है कि:

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}

— user9459537
स्रोत

1

यदि आप एक पुराने प्रश्न पर पोस्ट करने जा रहे हैं, तो वर्तमान मानों (फ्लेक्स पर कोई उपसर्ग नहीं) का उपयोग करने की सिफारिश की जाती है।

— jhpratt

क्षमा करें, मुझे नहीं पता कि आप किस बारे में बात कर रहे हैं।

— user9459537

1

फ्लेक्स उपसर्ग अभी काफी समय से आवश्यक नहीं हैं।

— jhpratt

और कौन से हैं?

— user9459537

5

इसे इस्तेमाल करे:

body { 
    min-height:100%; 
    background:red; 
} 

#some_div {
    min-height:100%; 
    background:black; 
}

IE6 और पुराने संस्करण न्यूनतम ऊंचाई की संपत्ति का समर्थन नहीं करते हैं।

मुझे लगता है कि समस्या यह है कि जब आप शरीर को 100% की ऊंचाई बताते हैं, तो यह पृष्ठभूमि केवल एक ब्राउज़र "व्यूपोर्ट" के देखने की लंबाई जितनी हो सकती है (देखने का क्षेत्र जो ब्राउज़र टूलबार और स्टेटबार और मेनार और बाहर निकाल देता है) खिड़की के किनारे)। यदि सामग्री एक व्यूपोर्ट से अधिक लंबी है, तो यह पृष्ठभूमि के लिए समर्पित ऊंचाई से अधिक बह जाएगी।

शरीर पर यह न्यूनतम ऊंचाई संपत्ति पृष्ठभूमि को कम से कम एक व्यूपोर्ट के रूप में लंबा होना चाहिए यदि आपकी सामग्री एक पूरे पृष्ठ को नीचे तक नहीं भरती है, फिर भी इसे अधिक आंतरिक सामग्री को शामिल करने के लिए नीचे की तरफ बढ़ने देना चाहिए।

— ऐस फ्राहम
स्रोत

3

पुराना सवाल है, लेकिन मेरे मामले में मैंने position:fixedइसे मेरे लिए हल किया। मेरी स्थिति भले ही थोड़ी अलग रही हो। मेरे पास divलोडिंग एनीमेशन के साथ एक ओवरलेयर सेमी ट्रांसपेरेंट था जिसमें मुझे पेज लोड करते समय डिस्प्ले की जरूरत थी। इसलिए उपयोग height:auto / 100%या min-height: 100%दोनों ने खिड़की को भर दिया, लेकिन ऑफ-स्क्रीन क्षेत्र को नहीं। position:fixedउपयोगकर्ता के साथ इस ओवरले स्क्रॉल का उपयोग करते हुए , इसलिए यह हमेशा दृश्य क्षेत्र को कवर करता है और स्क्रीन पर केंद्रित मेरे प्रीलोडिंग एनीमेशन को रखता है।

— थॉमस स्मार्ट
स्रोत

1

बस इन दोनों लाइन को अपने css id #some_div में जोड़ें

display: block;
overflow: auto;

उसके बाद आपको वही मिलेगा जो आपकी तलाश में है!

— singhviku
स्रोत

0

मुझे पूरी तरह से यकीन नहीं है कि मैंने सवाल को समझ लिया है क्योंकि यह काफी सीधा जवाब है, लेकिन यहाँ जाता है ... :)

क्या आपने कंटेनर के अतिप्रवाह गुण को दृश्य या ऑटो में सेट करने का प्रयास किया है ?

#some_div {
    height:100%;
    background:black; 
    overflow: visible;
    }

जोड़ना है कि काले कंटेनर धक्का चाहिए जो भी अपने गतिशील कंटेनर के आकार की आवश्यकता है। मैं ऑटो के लिए दृश्यमान पसंद करता हूं क्योंकि ऑटो स्क्रॉल सलाखों के साथ आता है ...

— jlisham
स्रोत

0

आधुनिक ब्राउज़र "व्यूपोर्ट ऊंचाई" इकाई का समर्थन करते हैं। यह उपलब्ध व्यूपोर्ट ऊंचाई तक div का विस्तार करेगा। मुझे यह किसी भी अन्य दृष्टिकोण से अधिक विश्वसनीय लगता है।

#some_div {
    height: 100vh;
    background: black;
}

— devdrc
स्रोत

0

यहां तक कि आप ऐसा कर सकते हैं

display:block;
overflow:auto;
height: 100%;

इसमें सामग्री के अनुसार आपका प्रत्येक डायनामिक डिव शामिल होगा। मान लीजिए यदि आपके पास कक्षा के साथ एक सामान्य div है तो यह सामग्री के अनुसार प्रत्येक गतिशील div की ऊंचाई बढ़ाएगा

— आहिस्ता आहिस्ता
स्रोत

0

आप भी उपयोग कर सकते हैं

 display: inline-block;

खदान ने इसके साथ काम किया

— Parthan_akon
स्रोत

0

स्थिति के बिना सब कुछ: फिक्स्ड

हाल ही में एक मेनू के लिए यह पता लगाने का एक अच्छा तरीका है कि मैं बॉडी सेट कर रहा हूँ:

position: relative

और अपने रैपर क्लास को इस तरह सेट करें:

#overlaywrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100;
}

इसका मतलब है कि आपको स्थिति को निर्धारित करने की आवश्यकता नहीं है और अभी भी स्क्रॉल करने की अनुमति दे सकते हैं। मैंने इसका उपयोग मेनू के ओवरलेइंग के लिए किया है जो वास्तव में बड़े हैं।

— बेंजामिन वॉन
स्रोत

0

फ्लेक्स का उपयोग करें

.parent{
    display: flex
}

.fit-parent{
    display: flex;
    flex-grow: 1
}

— Nagibaba
स्रोत

0

ठीक है, मैंने कुछ इस तरह की कोशिश की:

शरीर (सामान्य)

#MainDiv { 
  /* where all the content goes */
  display: table;
  overflow-y: auto;
}

इसे लिखने का सटीक तरीका नहीं है, लेकिन अगर आप टेबल के रूप में मुख्य डिव डिस्प्ले बनाते हैं, तो यह फैलता है और फिर मैंने स्क्रॉल बार लागू किया।

— एलेक्स
स्रोत