स्टिक पाद के बिना (अनावश्यक) स्क्रॉल बार

Question

संपादित 2 पेज के नीचे तक:

कि पाद पैदा कर रहा था पृष्ठ के निचले भाग से टिक नहीं करने के लिए अपने कोड में एक त्रुटि हुई थी। मेरे कोड कुछ इस तरह देखा:

<div id="footer"> 
<div id="copyright-bg" class="container"> 
    <div class="row"> 
    <div class="twelvecol"> 
    <p class="copyright-text">Lorum Ipsum</p> 
</div> 
</div> 
</div> 
</div> 

मैं <div id="footer"> हटा दिया और id="copyright-bg" करने के लिए उन सीएसएस गुण चले गए और यह तो नीचे करने के लिए ठीक से रहना शुरू कर दिया। लेकिन अब एक और मुद्दा उठ गया है! अब मेरे पास अनावश्यक स्क्रॉल बार हैं! Here is a Fiddle जिसमें क्या हो रहा है यह जानने के लिए कोड का सबसे प्यारा कोड है। मैंने सोचा कि यह ढाल हो सकता है लेकिन जब मैंने कोड को एक ठोस पृष्ठभूमि में बदल दिया तो स्क्रॉल बार अभी भी दिखाई दिए।

नोट: मैंने क्रोम और फ़ायरफ़ॉक्स में परीक्षण किया है।

संपादित करें:

मैं website पर निर्देशों के अनुसार CSS Sticky Footer उपयोग करने के लिए प्रयास किया है।

मुझे लगता है कि पृष्ठ के मेरे सीएसएस (?) here is a Fiddle में कोई संघर्ष है।

मैंने this website suggested का भी प्रयास किया है और तकनीकी रूप से काम करता है, यह स्क्रॉलबार बनाता है! यदि संभव हो तो मैं इससे बचना चाहूंगा।

मूल प्रश्न

मैं एक पृष्ठ पर काम कर रहा हूँ और मैं अपने कॉपीराइट कंटेनर के नीचे काले रंग का बार के साथ छोड़ दिया हूँ अगर पेज अधिक सामग्री (पेज के लिए IE कोई स्क्रॉल बार) नहीं है।

नोट:: आप कहाँ देख शब्द Done अपने ब्राउज़र के नीचे है, एक तीर काला पट्टी की ओर इशारा करते है

यहाँ एक स्क्रीनशॉट है।

मैंने बार को हटाने के लिए कुछ चीजों का प्रयास किया है। जब मैं शरीर टैग में height: 100%; जोड़ता हूं तो यह मेरी पृष्ठभूमि ढाल लेगा और यह पृष्ठ के नीचे तक पहुंच जाएगा लेकिन फिर यह अच्छा नहीं लगेगा। मैंने फिर कॉपीराइट कंटेनर में height: 100% जोड़ने का प्रयास किया। इससे ग्रे क्षेत्र को नीचे खींचने और अत्यधिक रिक्त स्थान और स्क्रॉलबार का कारण बन गया। मैंने तत्व को पूरी तरह से स्थापित करने का प्रयास किया है, लेकिन यह कई अन्य मुद्दों का कारण बनता है और पूरी तरह से स्थिति से बचने के लिए पसंद करेगा।

मैं ब्लैक बार को कैसे हटा सकता हूं?(अधिमानतः सिर्फ सीएसएस के साथ लेकिन एक जवाब jQuery/जावास्क्रिप्ट का उपयोग करता है को स्वीकार करेंगे)

कोड:

HTML:

<!-- Body Content Is Here --> 
<div id="copyright-bg" class="container"> 
<div class="row"> 
<div class="twelvecol"> 
    <p class="copyright-text">Ipsum</p> 
</div> 
</div> 
</div> 

सीएसएस:

html, body{ 
font-size:1em; 
font-family: "ff-dagny-web-pro", Helvetica, Arial, sans-serif; 
line-height:1.438em; 
color:#222; 
    margin: 0; 
    padding: 0; 
    text-align: justify; 
    background: linear-gradient(to bottom, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%); 
    /* Vendor Specific Background Gradients... */ 
} 

#copyright-bg{ 
margin-top:1.875em; 
background: none repeat scroll 0 0 #666666; 
    border-top: 5px solid #E31836; 
padding:1.250em; 
} 

.container { 
    padding-left: 20px; 
    padding-right: 20px; 
} 

.row { 
    width: 100%; 
    max-width: 1140px; 
    min-width: 755px; 
    margin: 0 auto; 
    overflow: hidden; 
} 

.row .twelvecol { 
    width: 100%; 
    float: left; 
} 

Answer 1

यदि आपने कई समाधानों की कोशिश की है (जैसे Ryan Fait's footer या CSS Sticky Footer (यह लिंक टूटा हुआ है, see this instead), जो मेरा पसंदीदा है) तो मैं शर्त लगाता हूं कि आपको चेहरे की कीमत से बड़ी समस्या है। उन दो उदाहरणों ने समय की परीक्षा साबित कर दी है और अभी भी एक पाद लेख बनाने के लिए सबसे अधिक उपयोग किए जाने वाले तरीकों को बनाए रखा है जो पृष्ठ के नीचे चिपक जाती है। जबकि मैं आपके कोड को झुका नहीं रहा हूं, मैं सुझाव दूंगा कि हो सकता है कि आप उस पृष्ठ को फिर से शुरू करें जिसे आप स्क्रैच से बना रहे हैं और पहला कार्यान्वयन चिपचिपा पाद लेख हो। वहां से आपको अपनी दृश्य शैलियों को कॉपी और पेस्ट करने में सक्षम होना चाहिए और यदि यह फिर से खराब हो जाता है तो आप कोड की अपनी अपराधी रेखा को जानते हैं।

संपादित करें:

मैं क्योंकि खरोज की कमी बनाया उसे पढ़ने में कठिन अपने कोड थोड़ा संपादित करने के लिए की जरूरत है। Here's the new jsFiddle. मैंने जो कुछ किया वह कुछ चीजें थीं। यहां आपके सीएसएस कोड के शीर्ष पर जोड़े गए हैं:

* {margin:0;padding:0;} 
html, body {height: 100%;} 

#content-wrap {min-height: 100%;} 

आपकी लाइनें आपके कोड को काम करने के लिए 100% आवश्यक हैं। आपको केवल एक वाइल्डकार्ड (*) सभी तत्वों पर रीसेट करने की आवश्यकता नहीं है, लेकिन आपको स्क्रीन की पूरी ऊंचाई लेने के लिए दस्तावेज़ (html) और शरीर (body) को बताने की भी आवश्यकता है। मुझे याद नहीं है कि यह आपके मूल सीएसएस में था, लेकिन #content-wrap में min-height भी 100% होना चाहिए।

खोज के बाद, मुझे एहसास हुआ कि आपका पाद लेख वास्तव में 180px ऊंचाई में नहीं बल्कि 100px ऊंचाई में है। Here's the final jsFiddle. और यह भी, यहां पाद लेख छड़ी बनाने के लिए अंतिम कोड है:

#main {overflow:auto; 
    padding-bottom: 100px;} /* must be same height as the footer */ 

#footer {position: relative; 
    margin-top: -100px; /* negative value of footer height */ 
    height: 100px; 
    clear:both;} 

अब आप यह देखना चाहिए कि आप नीचे के लिए इस कोड, पाद लाठी लागू (और डक्ट टेप के बिना ऐसा नहीं करता है) जब। उम्मीद है की यह मदद करेगा!

Answer 2

चिपचिपा पाद लेख कोड की अधिकांशता मेरे पृष्ठ के साथ समस्याएं उत्पन्न करती प्रतीत होती है। इस समस्या के समाधान के लिए मैं निम्नलिखित कोड का उपयोग कर रहा:

एचटीएमएल

<body> 
<div id="page-content"> 
    <header> 
    <!-- Header Content Goes Here --> 
    </header> 

    <!-- Page Content Goes Here --> 

    <footer> 
    <!-- Footer Content Goes Here --> 
    </footer> 

</div> 
</body> 

जे एस

$(function() { 
    var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight()); 
$("#page-content").css("min-height",height+"px"); 
}); 

क्या करता है पेज की ऊंचाई की गणना है और पेज के लिए न्यूनतम ऊंचाई निर्धारित करें, इस प्रकार पाद लेख को नीचे चिपकाएं। यह खूबसूरती से काम करता है।

नोट: मैं HTML5 का उपयोग कर रहा हूं।