Comment garder le pied de page en bas même avec le site de dynamic height
Comment puis-je garder un div de pied de page toujours au bas de la fenêtre quand j'ai une page qui définit dynamiquement la hauteur (obtenir des informations de la base de données, par exemple) avec CSS?
Si vous voulez le faire avec jQuery, je suis venu avec cette et fonctionne très bien:
définissez le CSS de votre pied de page:
#footer { position:absolute; width:100%; height:100px; }
Définir le script:
<script>
x = $('#div-that-increase-height').height()+20; // +20 gives space between div and footer
y = $(window).height();
if (x+100<=y){ // 100 is the height of your footer
$('#footer').css('top', y-100+'px');// again 100 is the height of your footer
$('#footer').css('display', 'block');
}else{
$('#footer').css('top', x+'px');
$('#footer').css('display', 'block');
}
</script>
Ce script doit être à la fin de votre code;
9 réponses
je crois que vous êtes à la recherche d'un Collant Pied De Page
essaye ceci: http://ryanfait.com/sticky-footer/
à Partir de l'article ci-dessus:
mise en page.css:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
la page html:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
je pense que cela va résoudre tous vos problèmes:
<script>
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight) {
$('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
}
});
</script>
Vous avez besoin d'au moins un élément avec un #footer
quand vous ne voulez pas de la barre de défilement si le contenu est adapté à l'écran, il suffit de changer la valeur de 10 à 0 La barre de défilement apparaîtra si le contenu ne s'adapte à l'écran.
ma solution jQuery/CSS préférée pour un pied de page collant (non fixe) est celle-ci:
CSS:
html {
position: relative;
min-height: 100%;
}
footer {
display:none;
position: absolute;
left: 0;
bottom: 0;
height: auto;
width: 100%;
}
jQuery:
function footerAlign() {
$('footer').css('display', 'block');
$('footer').css('height', 'auto');
var footerHeight = $('footer').outerHeight();
$('body').css('padding-bottom', footerHeight);
$('footer').css('height', footerHeight);
}
$(document).ready(function(){
footerAlign();
});
$( window ).resize(function() {
footerAlign();
});
DEMO: http://codepen.io/anon/pen/ZQxQoR
Remarque: votre pied de page doit commencer par <footer> et se termine par </footer> pour utiliser ce code tel quel, ou vous pouvez modifier le code pour correspondre à l'id/classe de votre pied de page.
par les Présentes une solution simple
CSS:
.footer_wrapper { width:100%; background-color:#646464; }
.footer_wrapper.fixed {position:fixed; bottom:0px;}
JS:
if ($(".Page").height()<$(window).height()){
$(".footer_wrapper").addClass("fixed");
}else{
$(".footer_wrapper").removeClass("fixed");
}
HTML:
<div class="Page">
/* PAGE CONTENT */
<div class="footer_wrapper" >
/* FOOTER CONTENT */
</div>
</div>
utilisez ce qui suit pour faire un pied de page fixe sur votre page web:
CSS:
body, html
{
margin: 0px; padding: 0px;
}
#footer
{
width: 100%;
height: 30px;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
/*text-align, background-color, and other specific styles can be applied here. You can change the height from 30px to anything which suits your needs. You can even comment Left: 0px & Right: 0px, but to make sure that it works in all browsers, lets leave them there.*/
}
HTML:
/*Place this div anywhere on the page, inside the form tags.*/
<div id="footer">
/*Your text/elements goes here*/
</div>
Espérons que cette aide!
santé,
Veino
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
voir le travail de l'échantillon,
ne sais Pas si c'est ce que vous cherchez:
<div style="position: fixed; bottom: 0px; left: 0px; right: 0px;">footer</div>
Voir ces deux articles. http://ryanfait.com/sticky-footer/ et http://css-tricks.com/snippets/css/fixed-footer/
je vérifiais cette question pour trouver la même réponse. Cela a été demandé il y a quelque temps et peut-être qu'il s'agit d'une nouvelle fonctionnalité ajoutée par jQuery. Mais c'est une solution simple qui existe maintenant:
il suffit d'ajouter data-position="fixed" à la balise div si vous utilisez jQuery.
http://demos.jquerymobile.com/1.2.0/docs/toolbars/bars-fixed.html
<div data-role="footer" data-position="fixed">
<h5>footer - page 3</h5>
</div><!-- /footer -->
Espérons que cette aide.