सीएसएस - एक पाद लेख कैसे बनाएं

Question

एक पाद लेख शैली बनाने का एक तरीका है, इसलिए जब कोई सामग्री (ब्राउज़र की ऊंचाई से अधिक) होती है तो यह पृष्ठ के नीचे (छिपी हुई) होगी, लेकिन यदि वहां है ब्राउजर के निचले किनारे पर पर्याप्त सामग्री नहीं होगी?

Answer 1

एक समाधान का उपयोग मैं अपने पाद लेख का एक ज्ञात ऊंचाई की आवश्यकता है।

Fiddles:

A lot of content

A little content

यहाँ एचटीएमएल है:

<main> 
    hello 
</main> 
<footer> 
    i am the footer 
</footer> 

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

html, body { 
    height: 100%; 
} 
main { 
    min-height: 100%; 
    margin-bottom: -100px; 
    background: #ddd; 
} 
main:after { 
    content: ""; 
    display: block; 
    height: 100px; 
} 
footer { 
    height: 100px; 
    background: #eee; 
} 

चाल आपके दस्तावेज़ का मुख्य भाग 100% के min-height रखने के लिए है। इस तत्व में आपके पृष्ठ पर बाकी सब कुछ होना चाहिए। मेरे उदाहरण में, मैंने इसके लिए main तत्व का उपयोग किया।

अगला, इस तत्व को पाद लेख की ऊंचाई के बराबर नकारात्मक मार्जिन दें। यह नीचे पैरर के लिए कमरे छोड़ने के लिए पर्याप्त है।

पहेली का अंतिम भाग after तत्व है। यह उस नकारात्मक मार्जिन की जगह को भरने के लिए आवश्यक है। अन्यथा, main की सामग्री फ़ूटर में बह जाएगी।

Answer 2

मैं केवल इसे पढ़ने की सिफारिश कर सकता हूं।
Show footer if at bottom of page or page is short else hide

या इस
http://css-tricks.com/snippets/css/fixed-footer/