एम्बर व्यू ऊंचाई

मैं अपने एम्बर एप्लिकेशन के लिए पूर्ण (100%) ऊंचाई, असफल होने के लिए मूल दृश्य प्राप्त करने का प्रयास कर रहा हूं।एम्बर व्यू ऊंचाई

मुझे इसकी आवश्यकता क्यों है? मेरे पास एक पाद लेख है जिसे मैं नीचे तक गठबंधन करना चाहता हूं भले ही पृष्ठ की सामग्री पूरी ऊंचाई को भर न दे।

.push { 
    height: 60px; 
} 

.content { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -60px; 
}

और एचटीएमएल (का उपयोग करते हुए ट्विटर बूटस्ट्रैप):

<body> 
    <div class="navbar navbar-fixed-top"><!-- ... --></div> 
    <div class="content"> 
    <div class="push"><!--//--></div> 
    <div class="container"> 
    <!-- page content --> 
    </div> 
    <div class="push"><!--//--></div> 
    </div> 
    <footer>Copyright ... 2013</footer> 
</body>

यह एंबर के बिना अच्छा काम करता है इसके लिए मैं निम्नलिखित सीएसएस है। अब, एम्बर पेश करना:

<script type="text/x-handlebars" data-template-name="application"> 
    <div class="navbar navbar-fixed-top"><!-- ... --></div> 
    <div class="content"> 
    <div class="push"><!--//--></div> 
    <div class="container"> 
    {{outlet}} 
    </div> 
    <div class="push"><!--//--></div> 
    </div> 
    <footer>Copyright ... 2013</footer> 
</script>

और अब यह काम नहीं करता है!

डरावनी चीज <div id="emberXYZ" class="ember-view"> डालती है जिसमें पूरी चीज होती है, जो स्वयं ही ठीक है, सिवाय इसके कि div की पूर्ण ऊंचाई नहीं है और पाद लेख सामग्री के ठीक बाद पृष्ठ के बीच में लटकता है।

मैंने समाधान के लिए चारों ओर गुगल किया, लेकिन मुझे कुछ भी नहीं मिला जो मुझे इस समस्या के आसपास काम करने की अनुमति देगा। मेरा अनुमान है कि एम्बर रूट रूट को 100% ऊंचाई पर सेट करना होगा (ऐसा नहीं लगता कि यह कैसे करना है), लेकिन शायद कुछ और चालाक चाल है जो मैं चाहता हूं कि पूरा करे। जो भी समाधान है, मुझे कम से कम IE8- संगत होने की आवश्यकता होगी।

अग्रिम धन्यवाद!

स्रोत

2013-03-26 user510159

क्यों नहीं। कंटेनर> div {min-height: 100%; } '? दुर्भाग्य से –

, इससे मदद नहीं मिलती है। यदि 'content' में पहले से ही न्यूनतम ऊंचाई 100% है, तो समस्या 'कंटेनर' नहीं है। समस्या एम्बर-व्यू div है जो पूर्ण ऊंचाई नहीं लेती है। – user510159

ओह, आपका मतलब एप्लिकेशन दृश्य है। App.AplicationView = Ember.View.extend ({classNames: ['my-class']}) –

यहां मैं दो जवाब दे सकता हूं जो वास्तव में एम्बर से संबंधित नहीं हैं। जेएस
1) EMberApp ऊंचाई के रूट तत्व को 100% पर कैसे सेट करें - आपको एम्बर ऐप कोड में कोई भी बदलाव करने की आवश्यकता नहीं है । सीएसएस में, बस एम्बर-व्यू क्लास ऊंचाई 100% पर सेट करें।

.ember-view { 
height: 100%; 
}

अगर आप इस स्टाइल का उपयोग अन्य विचारों से बचना चाहते हैं, तो आप देखने की आईडी यू के रूप में उपयोग कर सकते हैं एक emberXYZ निर्दिष्ट।

लेकिन अपने वास्तविक आवश्यकता
2) पाद लेख बनाना page-- आप वास्तव में पाद लेख absolute बनाने के लिए और 0 करने के लिए bottom मूल्य निर्धारित कर सकते हैं की केवल नीचे ले लो।

footer { 
position:absolute; 
bottom: 0px; 
}

स्रोत

2013-03-26 17:45:18 thecodejack

आपके उत्तर के लिए धन्यवाद। दुर्भाग्यवश, 1 के लिए), एम्बर-व्यू क्लास में ऊंचाई सेट करना अन्य सभी विचारों के साथ गड़बड़ करेगा और आईडी में XYZ भाग गतिशील है (इसे इस तरह हल किया जा सकता है, लेकिन मुझे एक रास्ता खोजने की आवश्यकता होगी रूट एम्बर व्यू में एक निश्चित आईडी जोड़ें - प्रतीत नहीं होता प्रतीत होता है)। 2 के लिए), पूर्ण प्लेसमेंट का उपयोग थोड़े धोखाधड़ी है। किसी भी तरह से मैं इसे बिना पूर्ण किए कर सकता हूं, लेकिन एक तरह से जो एम्बर के साथ उपरोक्त से बेहतर काम करेगा? – user510159

एक एम्बर व्यू के लिए एक विशिष्ट तत्व आईडी असाइन करने के लिए, आप 'elementId' प्रॉपर्टी सेट करते हैं। जाहिर है, प्रति एचटीएमएल, यह पृष्ठ पर अद्वितीय होना चाहिए। –

आप आवेदन दृश्य निर्धारित करते हैं, तो आप तो वर्ग जैसी चीज़ों को कस्टमाइज़ कर सकते हैं:

.ember-app { 
    height: 100%; 
}

स्रोत

2013-08-03 17:23:36

यह एम्बर रास्ता है। – FutoRicky

मैं एक ही समस्या की कोशिश कर रहा था:

App.ApplicationView = Ember.View.extend({ 
    classNames: ["ember-app"] 
})

तब आप अपने सीएसएस परिभाषित कर सकते हैं एम्बर जेएस और बूटस्ट्रैप के साथ काम करने के लिए चिपचिपा फूटर प्राप्त करें। जैसा कि आपने देखा है कि यह मुद्दा एम्बर जेएस के साथ एक कंटेनर div के भीतर दृश्य बनाने के साथ है जो 100% ऊंचाई प्राप्त नहीं करता है।

एम्बर केवल 0 तत्काल बच्चे .ember-view को <body> (यानी एप्लिकेशन दृश्य) में प्रस्तुत करता है। हम इस सीएसएस का उपयोग कर सकते हैं जो IE8 सहित ब्राउज़र में काम करेगा।

/* Works in all browsers, does not effect other views within your application */ 
body > .ember-view { 
    height: 100%; 
}

यह किसी भी .ember-view की है कि आपके आवेदन के भीतर subviews हैं को प्रभावित नहीं करता, क्योंकि वे अपने पृष्ठ <body> के प्रत्यक्ष बच्चों नहीं होगा।

स्रोत

2013-11-03 15:58:14 Scott

स्पष्ट रूप से ये 2 समाधान काम नहीं करते हैं। न तो सरल .म्बर-व्यू {ऊंचाई: 100%}। हालांकि मैं इंस्पेक्टर में एम्बर-व्यू क्लास div देख सकता हूं। कोई विचार ? –

किसी भी तरह से काम नहीं किया। एम्बर-व्यू क्लास पर फ्लेक्स का उपयोग करना था। –

बस लोगों को यह बताने के लिए, यह समाधान मेरे लिए काम करता है। एम्बर v1.11 के लिए, मुझे पहले डिफ़ॉल्ट एम्बर रूट एलेमेंट Ember.Aplication.create को ओवरराइड करना पड़ा। फिर मेरी रूट एलिमेंट को 100% चौड़ाई और ऊंचाई पर सेट करें। उसके बाद उपरोक्त समाधान तुरंत काम किया। –

मैंने हाल ही में इस समस्या से भाग लिया और मुझे इसे ठीक करने में कुछ समय लगा और मैं बस आपके साथ अपने समाधान साझा करना चाहता था।

"एंबर-CLI": "2.13.1"
"bootstrap": "^ 4.0.0-alpha.6"

तो जैसा कि user510159 लिखा समस्या यह है कि एंबर-व्यू वर्ग के साथ निहित है सेट किया जा रहा है

Scott से समाधान height: 100%; संपत्ति को एम्बर-व्यू क्लास में जोड़ने के लिए समाधान का आधा है।

/* Works in all browsers, does not effect other views within your application */ 
    body > .ember-view { 
    height: 100%; 
}

यह मेरे मामले में काम करने के लिए मैं अपने एचटीएमएल के भीतरी div तत्वों के लिए ऊंचाई गुणों को सेट करने के लिए किया था।

<div class=ember-view> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>

SCCS:

#header { 
    height: 20%; 
} 

#content{ 
    height: 70%; 
} 

#footer { 
    height: 10%; 
}

मुझे आशा है कि इस मदद करता है।

स्रोत

2017-05-24 13:23:29

एम्बर व्यू ऊंचाई

उत्तर

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