1307 sujets

Web Mobile et responsive web design

Bonjour à tous,

J'ai toujours eu des problèmes avec les footer.

Ici, le footer chevauche le bloc principal du site.

J'ai arraché plusieurs fois les cheveux, j'ai pu résoudre le problème.

Voilà le code:

 /**** HTML ***/<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR" prefix="og:  http://ogp.me/ns#"  class="no-js"> <head> <meta charset="utf-8" /> <meta name="robots" content="noodp" />

<link rel="stylesheet" href="clement.css">

<meta name="viewport" content="width=device-width, initial-scale=1" /> <title>CLEMENT</title>

</head> <body> <div class="pryser"> <div class="gerks-pr"> <section id="modal">

</section>

<div class="container"> <div class="row" id="text">

<div class="columnav">

<h2>CLEMENT</h2>

<p>Site Internet personnel de Clément. Futur développeur web.<br>

Je vous souhaitons la bienvenue, <br>au plus vite, vous trouverez sur ce site Internet de nombreuses informations.<br>

<p></p>

CLEMENT, depuis Bamako - Mali.

</p>

<a class="btn btn-primary" data-toggle="modal" data-target="#contact">Me contacter</a>

</div> </div>

</div>

</div>

<footer class="nasa">Copyright @ CLEMENT </footer> </div>

</body> </html> 

 /*** CSS ***/
html,body{ height: 100% }

body{ font-family:'Merriweather Sans', 'Ubuntu', 'Maven Pro', 'Open Sans'; padding-top:30px;margin:0;font-size:16px;text-align:center; }.pryser{min-height:100%;width:100%; margin:0;padding:0;position:relative;} .gerks-pr{padding-bottom:30px;} .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;padding-bottom: 2px; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } .btn-primary{ padding:10px 20px 10px 20px; background-color:transparent; border:1px solid #000; border-radius: 4px; margin-top:3px;

}

.btn-primary:hover{ transition-duration:1s; background-color:rgba(0,0,0,0.4); border:1px solid #000; } .nasa{position:absolute;height: 100px;bottom: 0;left: 0;right: 0;border: 1px solid transparent;background-color:rgba(0,0,0,0.3) } @media (min-width: 768px) { .nasa{ border-radius: 4px; } } .nasa{ bottom: 0; margin-bottom: 0; border-width: 1px 0 0;
}

Par avance, merci.
Bonsoir.

Vous fixez une hauteur de 100px à votre footer mais vous le mettez en même temps en 'position : absolute'. Vous le sortez donc du calcul de la hauteur totale.

Le padding-bottom de la 'div.gerks-pr' n'est que de 40px.

Lorsque la hauteur de la page est suffisamment grande, cela ne pose pas de problèmes. Mais si la hauteur de la page diminue…

CQFD : la hauteur du padding-bottom doit être au moins 100px.

Smiley smile
Bonjour,

Merci beaucoup de votre réponse.


Je viens, en fait, de trouver une solution:

Appliquer à la
div.pryser
un
padding-bottom:100px;
et ça marche parfaitement.

Merci beaucoup.