मैंने अन्य समाधानों को देखा है, हालांकि वे मेरे लिए काम नहीं कर रहे हैं। मैंने ऊंचाई की कोशिश की है: मेरी साइडबार पर 100% और वह अभी भी चाल नहीं कर रहा है। क्या कोई मुझे सही दिशा में इंगित कर सकता है? मुझे पेज की पूरी लंबाई बढ़ाने के लिए साइडबार का रंग चाहिए।पेज की पूरी लंबाई में मैं अपनी साइडबार कैसे बढ़ा सकता हूं?
HTML: http://lrroberts0122.github.com/DWS/lab3/index.html
सीएसएस: http://lrroberts0122.github.com/DWS/lab3/css/main.css
ठीक है, मैं यहाँ छोटे से अधिक की व्याख्या करने की कोशिश करेंगे:
जब आप सेट ऊंचाई: 100%; सीएसएस में आपको खुद से पूछना है - "100% क्या?" - ... अच्छा यह इस बात पर निर्भर करता है कि आप तत्व की स्थिति कैसे सेट करते हैं। जब आप स्थिति सेट करते हैं: पूर्ण; तो यह उपयोगकर्ता का ब्राउज़र दृश्य होगा 0 अन्यथा यह तत्व की मूल ऊंचाई का 100% होगा। इस प्रकार यदि आप कहीं भी उचित ऊंचाई या पूर्ण स्थिति निर्धारित नहीं कर रहे हैं तो आपको कुछ भी 100% कुछ भी नहीं मिलेगा जो कुछ भी नहीं है (जो डिफ़ॉल्ट सामग्री-समायोजित ऊंचाई पर वापस रोल करता है)।
तो चलो एक पल के लिए के माता पिता div की स्थिति पूर्ण बनाने और 100% ऊंचाई पर यह स्थापित करने पर विचार (ताकि आपके अपेक्षाकृत तैनात बच्चों साइडबार एक ही ऊंचाई इसकी ऊंचाई 100% पर सेट है मिल जाएगा)। HERE A FIDDLE - अब देखते हैं कि हमारे पास क्या है: हमारे पास एक मूल div (पीला) उपयोगकर्ता के ब्राउज़र दृश्य के रूप में उच्च है, लेकिन इसकी ऊंचाई तय की गई है और सामग्री को फिट करने के लिए नहीं बदलेगी, फिर हमारे पास एक साइडबार (लाल) मिलान होगा माता-पिता की ऊंचाई (इस प्रकार इसकी ऊंचाई सामग्री ईथर में फिट नहीं होगी), आखिरकार हमारे पास एक लंबी सामग्री टेक्स्ट (पारदर्शी बीजी) है जो स्पष्ट रूप से पैर के div की ऊंचाई और भूमि को कहीं भी बीच में ओवरलैप करता है। अच्छा नहीं ...
हम क्या कर सकते हैं? (doesn't seem setting parent's overflow to scroll is a good idea) ... हमें समस्या को सही तरीके से देखने की ज़रूरत है: आपके मूल रूप से दो भाई divs हैं और आप चाहते हैं कि वे अपनी सामग्री की ऊंचाई अच्छी तरह से फिट करें, लेकिन साथ ही आप उनमें से एक को अपने भाई की ऊंचाई को रखना चाहते हैं -> उस के लिए कोई आसान peasy सीएसएस समाधान (जो मुझे पता है)।
अंत में मेरा सुझाव थोड़ा jquery का उपयोग करना है: here a fast setup और here the full site। अब बस लिखें:
var height = $('.content').height()
$('.sidebar').height(height)
and it'll work just fine। नोटिस मैंने माता-पिता के लिए पूर्ण स्थिति छोड़ी और इसे 100% ऊंचाई पर सेट किया, लेकिन साइडबार के लिए कोई ऊंचाई निर्धारित नहीं की जो अब सामग्री पैनल के वास्तविक आकार से काफी मेल खाती है।
आशा इस मदद करता है
height:100% ठीक काम करना चाहिए, लेकिन क्या आप वाकई युक्त div 100% के साथ-साथ बनाने बनाने के लिए किया है।
#main-content {
background: url("../images/diagonal-noise.png");
}
#content {
background-color: #FEFEFE;
width: 920px;
margin-left: auto;
margin-right: auto;
border-left: 25px solid #79879E;
border-right: 25px solid #79879E;
padding: 20px;
height:100%;
}
#secondary-content {
background-color: #CED6E2;
width: 200px;
float: left;
border-right: 1px dotted #79879E;
padding: 10px;
margin: 10px 20px 10px -20px;
height:100%;
}
किसी कारण से, यह अभी भी काम नहीं कर रहा है। :( – Lindsay
आपको इसे काम करने के लिए [गलत कॉलम] (http://www.alistapart.com/articles/fauxcolumns/) धोखा देने जैसा कुछ उपयोग करना पड़ सकता है। – Jason
आदमी काम नहीं करेगा, या कम से कम नहीं अच्छा ... http://jsfiddle.net/MLsN5/1/ उस पहेली में आप देख सकते हैं कि आपको पैरेंट के div के लिए पूर्ण स्थिति सेट करने की आवश्यकता है और यह माता-पिता की ऊंचाई तय करता है और यह सामग्री की ऊंचाई में फिट नहीं होगा ... यदि आप इमामा को जावास्क्रिप्ट से बाहर करने की कोशिश कर रहे हैं तो आप इसके साथ एक बेवकूफ पोस्ट कर सकते हैं। समस्या यह है कि आप चाहते हैं कि साइडबार भाई की ऊंचाई को फिट करे, माता-पिता की – Onheiron
@Onheiron, अपनी पोस्ट बहुत मददगार था। धन्यवाद!
मैंने अपने कोड में एक पंक्ति जोड़ा क्योंकि मैंने देखा कि लघु सामग्री पृष्ठ पृष्ठ के नीचे तक सभी तरह से विस्तारित नहीं हुए हैं और साइडबार भी कम रहने के कारण हैं। अब स्क्रिप्ट यह देखने के लिए जांचती है कि एक (.content या body) की ऊंचाई अधिक है और फिर .sidebar पर समान ऊंचाई लागू होती है।
एचटीएमएल:
<body>
<div class="sidebar"></div>
<div class="content"></div>
</body>
जावास्क्रिप्ट:
$(document).ready(function() {
var height1 = $('.content').height()
var height2 = $('body').height()
if (height1 > height2) {
$('.sidebar').height(height1)
} else {
$('.sidebar').height(height2)
}
});
सीएसएस:
body, .sidebar {
height:100%
}
फिर से किसी और भाग खोना अगर कथन के रूप में यह सीएसएस के लिए डिफ़ॉल्ट होगा। .content क्षेत्र शरीर की तुलना में कम ऊंचाई है, तो स्क्रिप्ट की कोई आवश्यकता नहीं है।
यदि आप बूटस्ट्रैप v3 या उच्चतर का उपयोग करते हैं तो यह वास्तव में काफी सरल है।
.sidebar {
background-color: lightgrey;
position: fixed;
bottom: 0;
}
प्रेस्टो!
तेज़ उत्तर यह है कि आप "नहीं कर सकते" क्योंकि सामग्री आकार के आधार पर ऊंचाई बदलनी चाहिए, इसलिए आप कहीं भी एक निश्चित ऊंचाई निर्धारित नहीं कर पाएंगे, इसलिए आप 100% कुछ भी नहीं कर रहे हैं जो कुछ भी नहीं है। इसे हल करने के लिए आपको थोड़ा जावास्क्रिप्ट – Onheiron
का उपयोग करना चाहिए, इसे सीधे मामले में कोड पोस्ट करने के लिए सबसे अच्छा अभ्यास माना जाएगा, न केवल लिंक। अब अगर मैं मदद करना चाहता हूं, तो मुझे 2 फाइलों के माध्यम से क्रॉल करना होगा और आप उन्हें इंगित करने के बजाय विशिष्ट पंक्तियों को देखना होगा। – Tom