Comment faire un pied de page fixe en bas?

J'utilise footer dans mon projet. J'utilise C# .net mvc.Comment faire un pied de page fixe en bas?

J'insère le pied de page. Mais j'ai un problème.

Lorsque le corps a un contenu faible, le pied de page remonte. C'est-à-dire en dessous du contenu du corps. Je veux que le pied de page soit fixé au bas de la page si le contenu du contenu est faible.

Comment puis-je l'atteindre?

.footer { 
 
    background: none repeat scroll 0 0 white; 
 
    border-top: 1px solid #e7eaec; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 10px 20px; 
 
    position: absolute; 
 
    right: 0; 
 
}

<div class="footer"> 
 
    Bottom Page 
 
</div>

Source

2017-06-20 Nivitha G

double possible de (https://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of- [Faire un pied de page bâton correctement en bas de la page] page-correctement) – vassiliskrikonis

https://css-tricks.com/snippets/css/sticky-footer/ – athi

Vous pouvez utiliser de nouvelles propriétés et valeurs de CSS3.

Par exemple:

<body> 
    <div class="container"></div> 
    <div class="footer"></div> 
</body>

Pour le CSS:

.container { 
    min-height: 90vh; 
} 

.footer { 
    height: 10vh; 
}

De cette façon, votre pied sera toujours au fond, même si votre conteneur est nul

Source

2017-06-20 06:59:06 trichetriche

cela rend la hauteur de votre pied de page dynamique, peut-être pas ce que vous voulez, pourrait également s'avérer être inférieur à votre pied de page hauteur du contenu .... –

C'est toujours une solution, il n'a pas précisé ces points. Et à propos du contenu du pied de page, vous pouvez l'adapter. Vous avez également des requêtes média pour gérer des cas spécifiques. – trichetriche

@Nivitha G Veuillez trouver le code suivant. J'espère que vous attendez la même chose.

footer { 
 
    background: #2db34a; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 20px 0; 
 
    position: fixed; 
 
    right: 0; 
 
    text-align: center; 
 
}

<footer>Fixed Footer</footer>

Source

2017-06-20 07:02:17 sanjay

Ce n'est pas beaucoup d'utilisation.Il apparaît * sur le dessus * de tout contenu. –

@ freedomn-m D'accord avec vous. Pouvez-vous s'il vous plaît me dire comment pouvons-nous faire mieux? – sanjay

il y a déjà un certain nombre de doublons dans SO –

Vous pouvez utiliser une classe site-footer pour créer un pied de page collante:

<div class="page-wrap"> 
    Content!  
</div> 
<footer class="site-footer"> 
    I'm the Sticky Footer. 
</footer>

Source

2017-06-20 07:06:34 kavita

si vous whant votre pied de page pour faire défiler en dessous du pli aussi bien, mais jamais plus alors la en bas de la fenêtre, vous pouvez faire quelque chose comme ceci:

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

puis

html{ 
    height:100%; 
} 
body{ 
    min-height:100%; 
    margin:0; 
    position:relative; 
} 

footer{ 
    background: #ccc; 
    height:30px; 
    position: absolute; 
    bottom:0; 
    width:100% 
} 

#content{ 
    padding-bottom:30px; 
}

https://jsfiddle.net/ay6jx9yp/

Source

2017-06-20 07:11:02

Will you please try by making this. 

html, body { 
    height: 100%; 
}

Voici un des answered link similaire à votre problème:

Source

2017-06-20 07:13:01

Vous devez faire la position: fixed; de position: absolute; de pied de page pour le rendre fixe .. ! Voir l'extrait ci-dessous ...!

.footer { 
 
    background: blue; 
 
    border-top: 1px solid #e7eaec; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    padding: 10px 20px; 
 
    position: fixed; 
 
    text-align: center; 
 
    color: #fff; 
 
}

<body> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <div class="footer"> 
 
    Bottom Page 
 
    </div> 
 
</body>

Source

2017-06-20 07:30:54

Comment faire un pied de page fixe en bas?

Répondre

Questions connexes