1. घर
  2. सवाल और जवाब
  3. सीएसएस स्टिकी फूटर कार्यान्वयन के साथ समस्या

सीएसएस स्टिकी फूटर कार्यान्वयन के साथ समस्या

2009-07-10 12 views
5

मुझे अपनी साइट पर काम करने के लिए चिपचिपा पाद लेख प्राप्त करने में कुछ समस्याएं हैं। यदि सामग्री खिड़की से छोटी है तो पाद लेख खिड़की के नीचे रहना चाहिए और मृत स्थान को एक div के साथ भरना चाहिए। मुझे लगता है कि CSS Sticky Footer ऐसा करता है, लेकिन मुझे सामग्री को धक्का देने के लिए "पुश div" प्राप्त नहीं हो सकता है। जैसा कि आप देख सकते हैं कि मेरा कोड केवल बॉडी-रैपर-फ़ूटर नहीं है।सीएसएस स्टिकी फूटर कार्यान्वयन के साथ समस्या

<body> 
    <div id="banner-bg"> 
    <div id="wrapper"> 
     <div id="header-bg"> 
     <!-- header stuff --> 
     </div> <!-- end header-bg --> 
     <div id="content-bg"> 
     <div id="content"> 
      <!-- content stuff --> 
     </div> <!-- end content --> 
     </div> <!-- end content-bg --> 
    </div> <!-- end wrapper --> 
    </div> <!-- end banner-bg --> 
</body> 

body { 
    color:    #00FFFF; 
    background-image: url("Images/img.gif"); 
    font-size:   1em; 
    font-weight:  normal; 
    font-family:  verdana; 
    text-align:   center; 
    padding:   0; 
    margin:    0; 
} 

#banner-bg { 
    width:    100%; 
    height:    9em; 
    background-image: url("Images/img2.gif"); background-repeat: repeat-x; 
    position: absolute; top: 0; 
} 

#wrapper { 
    width:    84em; 
    margin-left:  auto; 
    margin-right:  auto; 
} 

#header-bg { 
    height:    16em; 
    background-image: url("Images/header/header-bg.png"); 
} 

#content-bg { 
    background-image: url("Images/img3.png"); background-repeat: repeat-y; 
} 

#content { 
    margin-right:  2em; 
    margin-left:  2em; 
}

मैं इस बारे में उलझन में हूं कि सीएसएस चिपचिपा पाद लेख मेरे मामले में कहाँ जाना चाहिए।

संपादित करें, यहाँ है कि मैं क्या मिला है और मुझे क्या करना चाहते हैं: alt text http://bayimg.com/image/gacniaacf.jpg

स्रोत

2009-07-10 mdc

+0

सीएसएस चिपचिपा पाद लेख मेरे लिए एफएफ 3 या आईई 8 में काम नहीं करता है। शायद वह समस्या का हिस्सा है। – Eric

+0

मैंने आपके लेआउट के लिए वास्तविक कोड नमूना शामिल करने के लिए अपना उत्तर अपडेट कर दिया है। आईई 8 और एफएफ 2 में मेरे लिए ठीक काम करता है।5 – ChssPly76

उत्तर

5

आपका HTML एक बालक अजीब है। उदाहरण के लिए, banner-bg सबकुछ के चारों ओर लपेटता है क्यों?

उस ने कहा, चिपचिपा पाद लेख तकनीक का उपयोग करने के लिए आपको सब कुछ लपेटने की आवश्यकता है, लेकिन एक ही डीवी में पाद लेख। तो आपके <body> टैग में केवल दो शीर्ष डीआईवी होंगे - wrapper और footer। वर्तमान में आपके पास मौजूद सभी सामान उस रैपर डीवी के अंदर जाएंगे।

ध्यान दें कि चिपचिपा पाद लेख आपके लिए काम नहीं कर सकता है यदि आपके द्वारा उपयोग की जा रही पृष्ठभूमि छवियों में पारदर्शी क्षेत्र शामिल हैं क्योंकि यह wrapper पृष्ठभूमि पर हेडर द्वारा कवर किया गया है।

अद्यतन: ठीक है, यह संस्करण है जो काम करता है। "चिपचिपा फूटर" स्टाइल शीट cssstickyfooter.com से ली गई है और सभी आधुनिक ब्राउज़रों में काम करना चाहिए। मैंने आपके एचटीएमएल को थोड़ी सी सुव्यवस्थित कर दी है (आपकी तस्वीर के आधार पर अलग पृष्ठभूमि परतों की कोई आवश्यकता नहीं है) लेकिन आप इसे तब तक संशोधित कर सकते हैं जब तक आप मूल संरचना को जगह में रखते हैं। इसके अलावा, चूंकि मेरे पास आपकी छवियां नहीं हैं इसलिए मैंने चित्रण उद्देश्यों के लिए ठोस पृष्ठभूमि रंग जोड़े हैं, आपको उन्हें हटाने की आवश्यकता होगी।

<html> 
<head> 
<style> 
* {margin: 0; padding: 0} 
html, body, #wrap {height: 100%} 
body > #wrap {height: auto; min-height: 100%} 
#main {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; 
} 
/* CLEAR FIX*/ 
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden} 
.clearfix {display: inline-block} 
/* Hides from IE-mac \*/ 
* html .clearfix { height: 1%} 
.clearfix {display: block} 
/* End hide from IE-mac */ 

/* Do not touch styles above - see http://www.cssstickyfooter.com */ 

body { 
    background-image: url("Images/img.gif"); 
    background: #99CCFF; 
    color: #FFF; 
    font-size: 13px; 
    font-weight: normal; 
    font-family: verdana; 
    text-align: center; 
    overflow: auto; 
} 

div#banner { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 9em; 
    background: url("Images/img2.gif") repeat-x; 
    background: #000; 
} 

div#wrap { 
    background: #666; 
    width: 84em; 
    margin-left: auto; 
    margin-right: auto; 
} 

div#header { 
    height: 16em; 
    padding-top: 9em; /* banner height */ 
    background: url("Images/header/header-bg.png"); 
    background: #333; 
} 

div#footer { 
    background: #000; 
    width: 84em; 
    margin-left: auto; 
    margin-right: auto; 
} 

</style> 
</head> 
<body> 
<div id="banner">Banner</div> 
<div id="wrap"> 
    <div id="main" class="clearfix"> 
    <div id="header">Header</div> 
    <div id="content"> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content 
    </div> <!-- end content --> 
    </div> <!-- end main --> 
</div> 
<div id="footer"> 
    Footer 
</div> 
</body> 
</html>

स्रोत

2009-07-10 21:39:12 ChssPly76

+0

बैनर-बीजी को 100% स्क्रीन (चौड़ाई) और शेष साइट (रैपर के अंदर) को कवर करने की आवश्यकता है केवल एक निश्चित चौड़ाई को कवर करना चाहिए और खिड़की में केंद्रित होना चाहिए। मैं ऐसा करने के किसी अन्य तरीके के बारे में सोच नहीं सकता था। यह मेरे पास है और चाहते हैं: http://img43.imageshack.us/img43/5470/sitestructure.png – mdc

+0

अपडेट के लिए धन्यवाद, मैं कुछ दिनों के लिए इसका परीक्षण नहीं कर पाऊंगा लेकिन मैं जब मैंने किया तो वापस लिखें। यदि यह काम करता है, तो आप सबसे अच्छे हैं :) – mdc

+0

क्षमा करें मैंने जवाब नहीं दिया, मैंने सभी गर्मियों में से एक ब्रेक लिया। मैंने आपके कोड को कुछ हद तक संशोधित किया है, और अब यह काम करता है - div संरचना को थोड़ा बदसूरत बनाना था लेकिन यह काम करता है। बहुत - बहुत धन्यवाद। – mdc

1
इसके बजाय अपने मौजूदा शैलियों को संशोधित करने के लिए (या सीएसएस स्टिकी पाद का प्रयोग करके) के

, इसकी बहुत आसान मुझे बस इसे फिर से करना करने के लिए। तो यहाँ जाता है:

<html> 
<head> 
<style type="text/css"> 
html, body { 
    height: 100%; 
} 
#container { 
    height: 100%; 
    margin: 0 0 -200px 0; 
    position: relative; 
} 
#footer { 
    position: relative; 
    height: 200px; 
} 

</style> 
</head> 
<body> 

<div id="container"> 
    <div id="header">Oh Beautiful Header</div> 
    <div id="content">Lots of Content</div> 
</div> 
<div id="footer">Stay Put Little Footer</div> 
</body>

मूल रूप से नकारात्मक मार्जिन पाद की ऊंचाई से मेल खाना चाहिए, ऊंचाई 100% की जरूरत करने के लिए html/शरीर लागू किया जाना है, और सापेक्ष स्थिति घोषित किया जाना चाहिए।

एक्सएचटीएमएल के संदर्भ में, ध्यान दें कि कैसे "पाद लेख" div "कंटेनर" div के अंदर नहीं है, बल्कि इसके बाहर (ताकि 2 अलग कंटेनर-जैसे divs, कंटेनर और पाद लेख हो) ।

अपने अभी भी हो रही परेशानी है, तो अपने मार्कअप के साथ मुख्य समस्याओं में है:

  • 100% ऊंचाई एचटीएमएल और शरीर टैग के लिए घोषित किया जाना चाहिए।
  • नकारात्मक मार्जिन कंटेनर div जो # बैनर-bg है पर याद आ रही है
  • अगर पाद लेख 100px लंबा, # बैनर-bg होना चाहिए margin-bottom है: -100px

  • स्थिति की जरूरत है दोनों पर रिश्तेदार होने के लिए # बैनर-bg और #footer

    एचटीएमएल {ऊंचाई: 100%;}

    body { 
    color:      #00FFFF; 
    background-image: url("Images/img.gif"); 
    font-size:     1em; 
    font-weight:  normal; 
    font-family:  verdana; 
    text-align:     center; 
    padding:     0; 
    margin:      0; 
    height: 100%; 
} 

#banner-bg { 
    width:      100%; 
    height:      100%; 
    background-image: url("Images/img2.gif"); background-repeat: repeat-x; 
    position: relative; 
    margin: 0 0 -200px 0; 
} 

#wrapper { 
    width:      84em; 
    margin-left:  auto; 
    margin-right:  auto; 
} 

#header-bg { 
    height:      16em; 
    background-image: url("Images/header/header-bg.png"); 
} 

#content-bg { 
     background-image:  url("Images/img3.png"); background-repeat: repeat-y; 
} 

#content { 
    margin-right:  2em; 
    margin-left:  2em; 
} 
#footer { 
    position: relative; 
    height: 200px; 
}

और बाकी:

<body> 
      <div id="banner-bg"> 
      <div id="wrapper"> 
       <div id="header-bg"> 
       <!-- header stuff --> 
       </div> <!-- end header-bg --> 
       <div id="content-bg"> 
       <div id="content"> 
        <!-- content stuff --> 
       </div> <!-- end content --> 
       </div> <!-- end content-bg --> 
      </div> <!-- end wrapper --> 
      </div> <!-- end banner-bg --> 
      <div id="footer"> 
      Footer Content 
      </div> 
     </body> 
</html>

स्रोत

2009-07-10 23:39:11

+0

सबसे पहले, आपका कोड काम नहीं करता है (कम से कम, यह 'ऊंचाई' है: 'html' के लिए घोषणा '100%'। दूसरा, मूल प्रश्न में चिपचिपा पाद लेख को लागू करने के तरीके का वर्णन करने वाले पृष्ठ के लिए एक लिंक शामिल था - ** mdc ** यह पूछ रहा है कि इसे _his_ परिदृश्य पर कैसे लागू करें। – ChssPly76

+0

हां, यह सही है ChssPly76। मैंने अभी यह चित्रित करने के लिए एक छवि जोड़ा है कि मुझे किसके साथ काम करना है। – mdc

+0

ChssPly76, आप सही हैं! मैंने शैलियों में एचटीएमएल टैग को दुर्घटना से छोड़ दिया (इसे जल्दबाजी में टाइप किया)। विरासत शैलियों को लागू करने के लिए हमेशा अच्छा है! इसके अलावा, मैंने न्यूनतम ऊंचाई छोड़ी (जिसे आईई 6 में पहचाना नहीं गया है), लेकिन मैं यह सुनिश्चित करने के लिए जोड़ूंगा कि फूटर कम से कम सामग्री के बावजूद नीचे रहता है। –

0

मुझे यकीन है कि स्टिकी पाद ऐसा करने के लिए, जब सामग्री आपके पेज ऊंचाई की तुलना में वास्तव में लंबे समय तक है ... मतलब क्या इस पर चल जाना चाहिए, तो नहीं कर रहा हूँ जब आप स्क्रॉल कर रहे हों तो टेक्स्ट मैं नीचे निर्देशांक की गणना करने के लिए जावास्क्रिप्ट का उपयोग करूंगा और फिक्सर को निश्चित स्थिति में एक नई परत पर रखूंगा। इसे काफी क्रॉस-ब्राउज़र अनुकूल बनाया जा सकता है ...

स्रोत

2009-07-15 13:04:53

+0

या जो भी फेसबुक अपने स्टेटस बार के साथ करता है - यह स्क्रीन के निचले हिस्से में तय होता है, और इसके लिए जावास्क्रिप्ट की आवश्यकता नहीं होती है। – Chii

0

अकेले सीएसएस और एचटीएमएल का उपयोग करके चिपचिपा पाद लेख को लागू करने में सक्षम होना बहुत अच्छा है, लेकिन मैं अपने मार्कअप/दस्तावेज़ संरचना को समायोजित करने का बड़ा प्रशंसक नहीं हूं कुछ कॉस्मेटिक।

मैं एक जावास्क्रिप्ट दृष्टिकोण पसंद करता हूं, कोई सुंदर गिरावट नहीं। यदि कोई जेएस नहीं, कोई चिपचिपा पाद लेख नहीं है। मैं आम तौर पर लागू करने के लिए jQuery का उपयोग करें:

jQuery

$(window).resize(function() { 

    if ($('body').height() < $(window).height()) { 
     $('#footer').addClass('fixed'); 
    } 
    else { 
     $('#footer').removeClass('fixed'); 
    } 

}).resize();

सीएसएस

#footer.fixed { position: fixed; bottom: 0; width: 100%; }

स्रोत

2013-05-13 15:35:27

0
यहाँ

आप कुछ कोड के रूप में

इस प्रकार के लिए सीएसएस के निम्नलिखित पंक्तियां जोड़ें पा सकते हैं आपकी स्टाइलशीट। .wrapper में मार्जिन के लिए नकारात्मक मान .footer और .push की ऊंचाई के समान संख्या है। ऋणात्मक मार्जिन हमेशा पाद लेख की पूरी ऊंचाई के बराबर होना चाहिए (जिसमें आप जोड़ सकते हैं किसी भी पैडिंग या सीमाओं सहित)।

सीएसएस में:

height: 100%; 
} 
.wrapper { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -4em; 
} 
.footer, .push { 
height: 4em; 
}

इस HTML संरचना का पालन करें। कोई सामग्री .wrapper और .footer div टैग के बाहर नहीं हो सकती है जब तक कि यह पूरी तरह से सीएसएस के साथ स्थित न हो। .push div के अंदर कोई भी सामग्री नहीं होनी चाहिए क्योंकि यह एक छुपा तत्व है जो पाद लेख को "धक्का" देता है, इसलिए यह कुछ भी ओवरलैप नहीं करता है।

एचटीएमएल शरीर में:

आपकी वेबसाइट की सामग्री यहां।

<div class="push"></div> 
    </div> 
    <div class="footer"> 
     <p>Copyright (c) 2013</p> 
    </div>

स्रोत

2013-07-08 10:58:12

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

  • कोई संबंधित समस्या नहीं^_^