एचटीएमएल 5 पाद लेख टैग हमेशा नीचे

मैं HTML 5 में एक साइट विकसित कर रहा हूं। मैं अपने सभी पाद लेख सामग्री को पाद लेख में लपेटता हूं। नीचेएचटीएमएल 5 पाद लेख टैग हमेशा नीचे

<!DOCTYPE html> 

<html> 
<head></head> 
<body> 
<header> 
<h1>Talking Dogs</h1> 
<b><p>Humans aren't the only talkers!</p></b> 
</header> 
<article> 
<p>Ever encountered a talking dog? I have.</p> 
<p>It all happened one day as I was walking down the street...</p> 
</article> 
<footer> 
© 2009 Woofer Dog Corporation 
</footer> 
</body> 
</html>

हालांकि ऊपर कोड वास्तविक साइट कोड नहीं है जैसा कि मैं साझा नहीं कर सकता। क्या कोई मुझे एचटीएमएल 5 में ऐसा करने का सबसे अच्छा तरीका सुझा सकता है ताकि यह आईई -6,7,8/फ़ायरफ़ॉक्स/सफारी/क्रोम/ओपेरा

स्रोत

2010-11-11 vaibought

एचटीएमएल 5 के पाद लेख टैग जादुई पृष्ठ के नीचे की सामग्री डाल नहीं करता है - आप अभी भी इसे शैली आप हमेशा बस के रूप में की है। इस संदर्भ में, यह वास्तव में एक <div> की तरह काम करता है, तो आप का इरादा के रूप में प्रदर्शित करने के लिए सीएसएस निर्दिष्ट करने के द्वारा इस तरह के रूप में यह व्यवहार करना चाहिए:

footer { 
    //CSS code to make it display at the bottom, same as you would have done for a div. 
}

पाद लेख पृष्ठ के निचले भाग से जुड़ी रूप में "स्टिकी पाद लेख" में जाना जाता है । आप यहां प्रभाव प्राप्त करने के तरीके के बारे में अधिक जानकारी प्राप्त कर सकते हैं: http://www.cssstickyfooter.com/

<footer> टैग स्वयं (सभी अन्य नए HTML5 टैग्स के साथ) लेआउट जादू करने के लिए नहीं है बल्कि अर्थपूर्ण उद्देश्यों के लिए है; यानी कोड को पढ़ने वाले किसी व्यक्ति को स्पष्ट करने के लिए (या अधिक संभावना है कि बॉट) कि टैग के अंदर डेटा पाद लेख डेटा है।

ब्राउज़र समर्थन के संदर्भ में, सभी मौजूदा ब्राउज़र आपको IE को छोड़कर नए HTML5 टैग निर्दिष्ट करने की अनुमति देंगे, लेकिन सौभाग्य से आईई (यहां तक कि आईई 6) के सभी संस्करणों को आपके पृष्ठ में HTML5Shiv hack सहित इसे अनुमति देने के लिए मजबूर किया जा सकता है।

उम्मीद है कि मदद करता है।

स्रोत

2010-11-11 12:47:32 Spudley

धन्यवाद बहुत स्पडली। इस लिंक ने मेरे लिए काम किया था। अब में खुश हूँ। मैं इमेजिंग कर रहा था कि एचटीएमएल क्रांति में एचटीएमएल डेवलपर समुदाय द्वारा प्रदान किया गया कुछ अच्छा समाधान हो सकता है, लेकिन मेरी उम्मीद के मुकाबले उन्होंने नहीं किया। लेकिन आपका लिंक मेरे लिए बहुत उपयोगी है। धन्यवाद – vaibought

कुछ प्रयोग करने के बाद मुझे यह पता चला है कि जब HTML5Shiv हैक के साथ संयुक्त cssstickyfooter.com के समाधान का उपयोग करने की बात आती है तो दिशाओं के साथ एक छोटी सी समस्या होती है। चिपचिपा पाद लेख के लिए वे आपको अपने शीर्षलेख में निम्नलिखित जोड़ने के लिए कहते हैं: "<शैली प्रकार =" पाठ/सीएसएस "> # लपेटें {प्रदर्शन: तालिका; ऊंचाई: 100%} nlinus

जैसे सभी प्रमुख ब्राउज़रों पर काम करे, तो आप इसे ठीक उसी तरह करते हैं इसे HTML4.01 में करें।

स्रोत

2010-11-11 12:13:27 Rob

हां मैंने ऐसा किया लेकिन मुझे कोई भी पर्याप्त पद नहीं मिला जो मेरे मामले में काम करता है। क्या आप कृपया मुझे कुछ अच्छी पोस्ट का सुझाव दे सकते हैं – vaibought

IE < 9 के लिए HTML5-समर्थन प्राप्त करने के लिए एक अच्छा जेएस है ... अन्य ब्राउज़र पहले से ही HTML5-तत्वों का समर्थन करते हैं।

https://code.google.com/p/html5shiv/#

स्रोत

2010-11-11 12:13:48 albuvee

लोगों HTML5shiv सुझाव दे रहे हैं, वहीं मैं modernizr का उपयोग करना चाहिये और साथ ही:

http://www.modernizr.com/

और यह भी हो सकता है पर एक नज़र डालें:

http://html5boilerplate.com/

यह सभी ब्राउज़रों प्रस्तुत करना मदद मिलेगी अपने साइट ठीक से। सौभाग्य।

स्रोत

2011-08-04 12:39:23 rickyduck

यह आपको मिलना चाहिए जहां जाने के लिए देख रहे हैं: मूल HTML

(अतिरिक्त पंक्ति जोड़ने के लिए इतना है कि कोड मार्कअप अच्छा दिखाएगा संपादित):

<footer> 
    <div class="colwrapper"> 
     <div class="fltcol">col1</div> 
     <div class="fltcol">col1</div> 
     <div class="fltcol">col1</div> 
    </div> 
</footer>

यहाँ सीएसएस है:

html { 
    position: relative; 
    min-height: 100%; 
} 

body { 
    margin: 0 0 100px; /* bottom = footer height */ 
} 

footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
    background-color: #949494; 
    color: #ffffff; 
} 

.colwrapper{ 
    -moz-column-count:3; /* Firefox */ 
    -webkit-column-count:3; /* Safari and Chrome */ 
    column-count:3; 
} 

/* Specify a 40 pixels gap between the columns: */ 
-moz-column-gap:40px; /* Firefox */ 
-webkit-column-gap:40px; /* Safari and Chrome */ 
column-gap:40px; 

/* Specify the width, style and color of the rule between columns: */ 

-moz-column-rule:3px outset #ff00ff; /* Firefox */ 
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */ 
column-rule:3px outset #ff00ff; 
}

स्रोत

2013-11-15 18:28:56 socialmatchbox

स्थिति <footer> कार्यों के लिए पूर्ण उपयोग करना है, लेकिन आप के रूप में अपने मुख्य चौड़ाई बढ़ती है आप इस समस्या को देखेंगे, या के रूप में आप का उपयोग का निरीक्षण किया, के लिए एक विस्तार सामग्री है, तो स्क्रीन के बीच में लटकना शुरू हो जाता है। एक सही समाधान नहीं है लेकिन निश्चित तल का उपयोग करके समस्या को हल करता है।

स्रोत

2016-03-23 17:08:43 Derya

एचटीएमएल 5 पाद लेख टैग हमेशा नीचे

उत्तर

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