सीएसएस पाद लेख

Question

के निचले भाग तक नहीं टिकता है मुझे अपने सीएसएस लेआउट में चिपचिपा पाद लेख स्थापित करने में कुछ कठिनाइयां हैं। मैं http://www.cssstickyfooter.com/ से विचार के साथ जाने की कोशिश कर रहा हूं लेकिन अगर divs में सामग्री पर्याप्त नहीं है तो पाद लेख पृष्ठ के नीचे नहीं रहता है।

सीएसएस फ़ाइल:

* { 
margin:0; 
padding:0; 
} 

body { 
height:100%; 
margin:0px; 
padding:0px; 
} 

#wrap { 
min-height: 100%; 
} 

#container { 
overflow:auto; 
padding-bottom: 150px; 
text-align:left; 
width:800px; 
margin:auto; 
} 

#header { 
height:240px; 
margin-top:20px; 
} 

#navigation { 
float:left; 
width:800px; 
margin-top:20px; 
} 

#content-container { 
float:left; 
width: 800px; 
} 

#left { 
clear:left; 
float:left: 
width:480px; 
height: auto; 
margin: 20px 0px 20px 0px; 
padding: 20px 10px 20px 10px; 
} 

#right { 
float:right; 
width:275px; 
height:auto; 
margin: 20px 0px 20px 0px; 
padding: 20px 10px 20px 10px; 
} 

#footer { 
position: relative; 
clear:both; 
height:150px; 
margin-top: -150px; 
} 

#columns { 
width:800px; 
height:150px; 
margin:auto; 
} 

#colleft { 
float:left; 
width:400px; 
height:150px; 
} 

#colright { 
float:right; 
position:relative; 
width:260px; 
height:150px; 
} 

html फ़ाइल:

<div id="wrap"> 

    <div id="container"> 

     <div id="header"></div> 

     <div id="navigation"> 

      <div id="lang"></div> 

     </div> 

     <div id="content-container"> 

      <div id="left"></div> 

      <div id="right"></div> 

     </div> 

    </div> 

    <div id="footer"> 

     <div id="columns"> 

      <div id="colleft"></div> 

      <div id="colright"></div> 

     </div> 
</div> 

Answer 1

मेरा मानना ​​है कि आप अपने सीएसएस से

html { height: 100%; }

याद कर रहे हैं।

Answer 2

क्या आपने स्थिति का उपयोग करने पर विचार किया है: तय?

#footer { position: fixed; bottom: 0px; height:150px; } 

कारण अपने उदाहरण काम नहीं कर रहा है, क्योंकि अपने #footer #wrap अंदर है, कि सीएसएस #footer चादर के बाहर होना चाहिए उपयोग कर रहा है के रूप में यह चादर जो न्यूनतम ऊंचाई सेट कर रहा है है 100% तक, और #footer को नकारात्मक मार्जिन का उपयोग करके ऊपर खींच लिया जा रहा है।

एचटीएमएल टैग को काम करने के लिए 100% की ऊंचाई की भी आवश्यकता है।

तो संक्षेप में, #footer घोंसला नहीं जा सकता है, और एचटीएमएल की ऊंचाई की आवश्यकता है: 100%;

उदाहरण यहाँ --- http://jsfiddle.net/CK6nt/

आशा है कि मदद करता है! लॉरी

Answer 3

आपके पाद लेख कक्षा में:

#footer { 
position: relative; 
clear:both; 
height:150px; 
margin-top: -150px; 
} 

बदलें position: relative;position:fixed ताकि वर्ग इस तरह दिखना चाहिए:

#footer { 
position: fixed; 
clear:both; 
height:150px; 
margin-top: -150px; 
} 

Answer 4

हो सकता है यदि आप किसी अन्य दृष्टिकोण का चयन करने की जरूरत है। मैं इस विधि का उपयोग नीचे Stick Footer to bottom with help of CSS3 पर पाद लेख चिपकाने के लिए करता हूं। यह केवल आधुनिक ब्राउज़रों में काम करता है) दूसरों के लिए "सुंदर गिरावट" काम करता है, सामग्री अभी भी सुलभ हो सकती है।