उम्र पुरानी समस्या। मुझे पृष्ठ के निचले हिस्से में <footer> तत्व की स्थिति की आवश्यकता है। हालांकि मेरे पास एक रैपर div नहीं है।सीएसएस और एचटीएमएल 5: पृष्ठ के नीचे <footer> स्थिति? कोई रैपर नहीं?
मैं निम्नलिखित संरचना ...
<body>
<header>
<section id="content">
<footer>
</body>
वहाँ एक आसान तरीका नीचे करने के लिए पाद लेख पुश करने के लिए करता है, तो सामग्री पर्याप्त नहीं है है है?
इस AFAIK अभी भी सबसे अच्छा तरीका है पृष्ठ के नीचे रहना एक पाद लेख प्राप्त करने के लिए है:
इसे position: fixed; bottom: 0, height: xxx बनाएं? बेशक, यह किसी भी सामग्री को ओवरलैप करेगा पृष्ठ वास्तव में खिड़की के नीचे पिछले होना चाहिए। शायद कुछ जेएस "लघु" सामग्री का पता लगाने और सीएसएस को उपयुक्त के रूप में सेट करने के लिए।
मैंने पहले एक jsfiddle बनाया था, यह http://jsfiddle.net/kuyabiye/K5pYe/ देखें, परिणाम विंडो को resizin करने का प्रयास करें, यदि सामग्री स्क्रॉल ओवरफ़्लो दिखाई देगी।
अपने कोड के आधार पर यह काम नहीं कर सकता, लेकिन मैं अपने body स्थापित करने का सुझाव था position:relative; पर और फिर footer से position:absolute; और bottom:0 पर सेट करें। सिद्धांत में यह चीजों को ओवरलैप नहीं करेगा।
की ऊंचाई के बराबर यह मेरे लिए ठीक काम कर रहा है पर एक निचला हाशिया निर्धारित किया है। धन्यवाद! – Riwels
इस प्रश्न से आया, और सोचा कि मैं जो पोस्ट कर चुका हूं उसे पोस्ट करूंगा। मेरे लिए आदर्श तरीका लगता है।
सीएसएस:
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%;
}
एचटीएमएल 5:
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
सभी क्रेडिट चला जाता है http://mystrd.at/modern-clean-css-sticky-footer/
मेरे लिए काम किया - धन्यवाद! – user949300
मुझे यह विकल्प पसंद है। बहुत अच्छा। इसके अलावा यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं तो सावधान रहें कि 'फूटर' तत्व के साथ '.footer' कक्षा को भ्रमित न करें। – Jess
को चेक आउट Fiddle
एचटीएमएल
<header>
</header>
<section id="content">
</section>
<footer>
</footer>
सीएसएस
body {
height: 100%;
}
footer {
width: 100%;
height: 200px;
}
jQuery
$(function() {
var footer = $('footer'),
footHgt = $('footer').outerHeight(),
bodyHgt = $('body').height();
footer
.css({
position: 'absolute',
left: '0',
top: bodyHgt - footHgt + 'px'
});
$(window).resize(function() {
var footer = $('footer'),
footHgt = $('footer').outerHeight(),
bodyHgt = $('body').height();
footer
.css({
position: 'absolute',
left: '0',
top: bodyHgt - footHgt + 'px'
});
});
});
यहाँ एक समाधान है कि मेरे लिए महान काम करता है। नीचे चिपचिपा, सामग्री के साथ कोई ओवरलैप नहीं, एक रैपर की कोई ज़रूरत नहीं है।
https://jsfiddle.net/vq1kcedv/
एचटीएमएल:
<!DOCTYPE html>
<head>
<title>Footer</title>
</head>
<body>
<nav>Link1 Link2</nav>
<article>content</article>
<footer>Copyright</footer>
</body>
</html>
सीएसएस:
html, body {
position: absolute;
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
body:after {
line-height: 100px; /* height of footer */
white-space: pre;
content: "\A";
}
footer {
position: absolute;
width: 100%;
height: 100px; /* height of footer */
bottom: 0px;
margin-top: -100px; /* height of footer */
}
मेरे लिए बहुत अच्छा काम किया। धन्यवाद:) – boca
मैं जानता हूँ कि यह एक पुरानी पोस्ट है, लेकिन मैं (जावास्क्रिप्ट) के साथ अपने ही समाधान देना चाहते थे:
/* css */
footer { width:100%; bottom:0; }
/* javascript */
if ($("body").height() < $(window).height()) {
document.querySelector('footer').style = 'position:absolute;'
}
इसे किसी भी आकार के किसी भी प्रकार के पाद लेख के साथ काम करना चाहिए।
संपादित करें: वैकल्पिक समाधान (सीएसएस के लिए कोई ज़रूरत नहीं):
/* footer */
if ($("body").height() < $(window).height()) { /* if the page is not long enouth, let's put some more margin to the footer */
var height = $(document).height() - $("body").height();
document.querySelector("footer").style.marginTop = height + "px";
}
बस सामग्री है कि पाद लेख – Jan