सीएसएस ऊंचाई के बीच अंतर: 100% बनाम ऊंचाई: ऑटो

167

मुझे एक साक्षात्कार में एक सवाल पूछा गया था कि "सीएसएस height:100%और क्या अंतर है height:auto?"

क्या कोई समझा सकता है?

css

— Gowsikan
स्रोत

236

height: 100% तत्व को उसके मूल कंटेनर की 100% ऊंचाई देता है।

height: auto इसका मतलब है कि तत्व की ऊँचाई उसके बच्चों की ऊँचाई पर निर्भर करेगी।

इन उदाहरणों पर विचार करें:

ऊंचाई: 100%

<div style="height: 50px">
    <div id="innerDiv" style="height: 100%">
    </div>
</div>

#innerDiv लेने जा रहा है height: 50px

ऊंचाई: ऑटो

<div style="height: 50px">
    <div id="innerDiv" style="height: auto">
          <div id="evenInner" style="height: 10px">
          </div>
    </div>
</div>

#innerDiv लेने जा रहा है height: 10px

— मनीष मिश्रा
स्रोत

5

मुझे लगता है कि 'ऊंचाई: ऑटो #innerDiv' के मामले में 10px + the size it needs for its own content- इस jsfiddle को

— BornToCode

@ मनीश मिश्रा: सबसे अच्छा उत्तरदायी डिजाइन क्या है? बाल तत्व या कंटेनर तत्व की ऊंचाई निर्धारित करना, और दूसरे को इसकी ऊंचाई प्राप्त करने देना?

— जॉन स्ट्रॉड

@Djack, यह सब इस बात पर निर्भर करता है कि आप विभिन्न स्क्रीन पर अपने डिजाइन से क्या दिखना, महसूस करना और व्यवहार करना चाहते हैं, और तदनुसार आप अपना सीएसएस लिखते हैं। ऐसा कोई सामान्य वैश्विक नियम नहीं है setting the height of the child element or the container element। आप अपने डिजाइन को प्राप्त करने के लिए जो कुछ भी करना चाहते हैं, कर सकते हैं, बशर्ते कि आप कुछ स्थिरता का पालन करें, दोहराव से बचें, फिर से काम करना, सामान्य लेआउट को समूहीकृत करना। संक्षेप में, आपके काम के लिए एक प्रणाली / पैटर्न होना चाहिए, ताकि पढ़ने में आसानी हो और बदल जाए, और निश्चित रूप से इस तथ्य से कि यह काम करता है

— मनीष मिश्रा

2

मुझे लगता है कि ऑटो के बारे में सोचने का एक अच्छा तरीका यह है कि आप 'परेशान' कर रहे हैं - यह सेट नहीं होने जैसा है।

— नीको

1

मैंने उस फिडेल को संशोधित किया है जो बॉर्नोटकोड ने ऊपर साझा किया है, ताकि यह अधिक स्पष्ट हो सके कि autoतत्व बीओटीएच को अपनी सामग्री, और उसके बच्चे की सामग्री को विकसित करने के लिए विकसित करता है। इसके विपरीत एक निश्चित ऊँचाई मूल्य ऐसी सामग्री (या शो) नहीं बढ़ाती है जो घोषित ऊँचाई के भीतर फिट नहीं हो सकती है। jsfiddle.net/m3f8y6xr/1 यह उत्तर, मेरा मानना है, इसे ओवबियस बनाने के लिए पर्याप्त रूप से शब्द नहीं है कि तत्व सभी सामग्री को शामिल करने के लिए बढ़ेगा, चाहे वह अपना पाठ हो, या बच्चे की सामग्री हो। बेशक यह तर्क दिया जा सकता है कि इसका अपना पाठ भी एक बच्चा है। यह व्यवहार की दृश्य पुष्टि प्रदान करता है।

— शेरलहोमन

5

एक 100% की ऊंचाई के लिए, होते हैं, शायद, अपने की ऊंचाई ब्राउज़र की भीतरी खिड़की , क्योंकि वह यह है कि अपनी मूल की ऊंचाई , पेज। एक autoऊंचाई हो जाएगा न्यूनतम ऊंचाई के शामिल करने के लिए आवश्यक ।

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

3

यह आवश्यक नहीं है कि मूल तत्व एक परिभाषित ऊँचाई के साथ एक है जो ब्राउज़र की विंडो के आकार के लिए फिट नहीं है

— goonerify

1

डिफ़ॉल्ट height: autoब्राउज़र में है, लेकिन height: X%युक्त ब्लॉक के प्रतिशत में ऊंचाई को परिभाषित करता है।

— वाहिद हेदराइनज़हाद
स्रोत

0

ऊंचाई: 100% काम करता है अगर मूल कंटेनर में एक निर्दिष्ट ऊँचाई संपत्ति है, तो यह काम नहीं करेगा

— चाउक्वुमेका
स्रोत