विभिन्न चौड़ाई सामग्री div के साथ पृष्ठ के पैर पर पाद लेख - एचटीएमएल, सीएसएस

मेरे पास 100% चौड़ाई और 980 पीएक्स की सामग्री हैडर हैऔर 100% चौड़ाई के पाद लेख। लेकिन पाद लेख पृष्ठ के नीचे चिपके नहीं है। यह संपर्क div पर निर्भर करता है। कृपया मेरा नीचे कोड देखें और कोडिंग में कोई समस्या होने पर मुझे बताएं।

मैं सभी पोस्ट खोजता हूं लेकिन मेरे लिए कुछ भी काम नहीं करता है। यदि आप google.com फ़ूटर देखते हैं, तो हमेशा स्क्रीन पर जो भी स्क्रीन रिज़ॉल्यूशन होता है।

     * {
margin: 0px;
padding: 0px;
}

body, html {
position: relative;
background-color: #fff;


height:100%;
}

.contents {
position: relative;
width: 980px;
margin: 0 auto;
background-color: red;
clear:both;
}

/* Header of the page */
.header {
height:100px;
width:100%;
background-color:#000099;
}

/* footer of the page */
.footer {
clear:both;
background:#6cf;
position:absolute;
bottom:0;
width:100%;
margin-top:5px;
height : 100px;
}

<body>
<div class="header">
here is the header
</div>

<div class="contents">
<p>Contents</p>
</div>

<div class="footer">
<p>Footer</p>
</div>

</body>

उत्तर:

उत्तर № 1 के लिए 1

चलो खरोंच से शुरू करते हैं। यह मेरी पसंदीदा चिपचिपा पाद लेख नुस्खा है। से अनुकूलित सीएसएस ट्रिक्स

पाद लेख रैपर से स्वतंत्र हैसामग्री। इसे प्रभावी रूप से व्यूपोर्ट से बाहर धकेल दिया जाता है और फिर नकारात्मक मार्जिन द्वारा खींचा जाता है। यह किसी भी ऊंचाई पर स्केल करेगा चाहे आप इसमें कितनी सामग्री डालते हैं।

अंतहीन सामग्री बेवकूफ उदाहरण

मूल विचार बेवकूफ

एचटीएमएल

<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
</div>
<div id="footer"></div>

सीएसएस

html, body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-family: Helvetica;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
width: 400px;
margin: 0 auto;
/* same height as footer */
margin-bottom: -120px;
}
#wrapper:after {
content:"";
display: block;
}
#header {
height: 200px;
background: #FF0;
}
#footer, #wrapper:after {
/* same height as wrapper negative margin */
height: 120px;
}
#footer {
background: #F00;
}

जवाब के लिए 0 № 2

इसे इस्तेमाल करे:

html, body {
height: 100%;
margin:0;
}
.header {
height:100px;
width:100%;
background-color:#000099;
}
.contents {
min-height: 100%;
width: 980px;
/* equal to footer height */
margin-bottom: -100px;
}
.contents:after {
content:"";
display: block;
}
.site-footer {
/* .push must be the same height as footer */
height: 100px;
width:100%;
}
.site-footer {
background:#6cf;
}

JSFiddle:

http://jsfiddle.net/EyGNp/2/


जवाब के लिए 0 № 3

यदि आप चाहते हैं कि आप हमेशा फूटर को नीचे रखेंपृष्ठ का, लेकिन चिपचिपा-फ़ूटर नहीं जो प्रदर्शित करता है जब सामग्री व्यूपोर्ट से अधिक लंबी होती है, तो आप सामग्री div की न्यूनतम ऊंचाई की गणना करने के लिए calc () का उपयोग कर सकते हैं।

.contents {
position: relative;
width: 980px;
margin: 0 auto;
background-color: red;
clear:both;
min-height: calc(100% - 205px);
}

यह क्या करता है की न्यूनतम ऊंचाई निर्धारित करता हैसामग्री div का 100% कंटेनर, हेडर और पाद लेख की ऊंचाई कम है। इसलिए, स्क्रीन के नीचे फूटर को मजबूर करने वाले व्यूपोर्ट की तुलना में कम सामग्री होने पर सामग्री div को बढ़ने के लिए मजबूर किया जाएगा।

यहाँ है बेला


संबंधित सवाल
सबसे लोकप्रिय