[Résolu] Footer toujours en bas de page ...

Question

THIRT05

17 Apr 2019 à 11:29

Bonjour à vous,

je ne parviens pas de faire en sorte que mon footer soit toujours en bas de page.

Voici mon code HTML :


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <meta name="description" content="website">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon site web</title>
</head>
<body>
<div class="site-container">
    <div class="row">
        <header class="header col-s-12">
            <a href="#" class="header__logo">Logo</a>
        </header>
    </div>
    <div class="row">
        <div class="site-content">
			<div class="row">
                <div class="sidebar-left col-s-2 col-m-2"></div>
                <div class="container col-s-8 col-m-8">
                    <div class="info">
						<h2>Bienvenu sur mon site.</h2>
						<p>
								Amy has been receiving phone calls for a year, where the caller stammers and then hangs up. The calls are from Kif, who is in love with Amy but is too nervous to speak. Zapp realizes that Amy and Leela know each other, and asks the two of them to go on a double date with him and Kif. Leela agrees as a favor to Amy, and they go to a restaurant aboard a space liner.

Kif uses Zapp's characteristically boorish pick-up lines, offending Amy. To prevent her and Leela from leaving, Kif sings karaoke. Amy is touched by this, but Zapp pushes Kif off the stage and sings to Leela, causing the passengers and crew of the ship to flee the restaurant in terror. Zapp crashes the ship into the planet Amazonia, where the Amazonians, a race of giant, muscular, tribal women, capture them.

Fry and Bender travel to Amazonia to rescue their friends but are also captured. They are taken to the Amazonians' leader, observing Amazonian society along the way. Fry, Zapp, and Bender ridicule female values, which makes Leela and Amy appreciate how good life would be without men. When the Amazonians ask what the purpose of men is, Amy explains, and the Amazonians realize that what she is describing is snu-snu, something they have heard of, but never experienced.
						</p>
					</div>
				</div>
                <div class="sidebar-right col-s-2 col-m-2"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <footer class="main_footer col-s-12">
            <p>
                <span class="muted">Website &copy; 2019</span><span class="footer_info_inline"> | </span>
                <a href="#">Page Facebook</a> .
                <a href="#">Page Google+</a> .
                <a href="#">Page Youtube</a>
            </p>
        </footer>
    </div>
</div>
</body>
</html>

Voici le contenu de mon CSS :


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  line-height: 1.4;
  height: 100%;
}
a {
  text-decoration: none;
  color: #757575;
}
site-container {
  min-height: 100%;
  position: relative;
  overflow: hidden;
}
.header {
  position: fixed;
  left: 0;
  right: 0;
  height: 55px;
  line-height: 55px;
  color: #FFF;
  background-color: #222a35;
}
.header__logo {
  padding-left: 15px;
}
.site-content {
  padding-bottom: 55px;
  background-color: #f2f2f2;
}
.container {
  overflow: hidden;
  *zoom: 1;
}
.main_footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 55px;
  line-height: 55px;
  color: #FFF;
  background-color: #222a35;
}
.main_footer p {
  text-align: center;
}
.main_footer .footer_info_inline {
  display: none;
}
.main_footer a {
  display: block;
}

/*-----------------------------------------------*\
    $RESPONSIVE
\*-----------------------------------------------*/
/*-----------------------------------------------*\
    $Medium Screen
\*-----------------------------------------------*/
@media only screen and (min-width: 640px) {
  .main_footer .footer_info_inline {
    display: inline;
  }
  .main_footer a {
    display: inline;
  }
}

@media only screen and (min-width: 1024px) {
  .main_footer .footer_info_inline {
    display: inline;
  }
  .main_footer a {
    display: inline;
  }
}

/*-----------------------------------------------*\
    $VARIABLES
\*-----------------------------------------------*/
.col-s-1, .col-m-1, .col-l-1, .col-s-2, .col-m-2, .col-l-2, .col-s-3, .col-m-3, .col-l-3, .col-s-4, .col-m-4, .col-l-4, .col-s-5, .col-m-5, .col-l-5, .col-s-6, .col-m-6, .col-l-6, .col-s-7, .col-m-7, .col-l-7, .col-s-8, .col-m-8, .col-l-8, .col-s-9, .col-m-9, .col-l-9, .col-s-10, .col-m-10, .col-l-10, .col-s-11, .col-m-11, .col-l-11, .col-s-12, .col-m-12, .col-l-12 {
  float: left;
  position: relative;
  min-height: 1px;
  padding: 0 10px;
}
.row:before, .row:after {
  content: "";
  display: table;
}
.row:after {
  clear: both;
}
.row {
  zoom: 1;
}

/*-----------------------------------------------*\
    $Class
\*-----------------------------------------------*/
.row {
  margin: 0 -10px;
}

/*-----------------------------------------------*\
    $Grid
\*-----------------------------------------------*/
.m-show {
  display: none;
}
.l-show {
  display: none;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-0 {
  margin-left: 0%;
}
.col-s-push-0 {
  left: 0%;
}
.col-s-pull-0 {
  left: 0%;
}
.col-s-1 {
  width: 8.33333%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-1 {
  margin-left: 8.33333%;
}
.col-s-push-1 {
  left: 8.33333%;
}
.col-s-pull-1 {
  left: 8.33333%;
}
.col-s-2 {
  width: 16.66667%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-2 {
  margin-left: 16.66667%;
}
.col-s-push-2 {
  left: 16.66667%;
}
.col-s-pull-2 {
  left: 16.66667%;
}
.col-s-3 {
  width: 25%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-3 {
  margin-left: 25%;
}
.col-s-push-3 {
  left: 25%;
}
.col-s-pull-3 {
  left: 25%;
}
.col-s-4 {
  width: 33.33333%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-4 {
  margin-left: 33.33333%;
}
.col-s-push-4 {
  left: 33.33333%;
}
.col-s-pull-4 {
  left: 33.33333%;
}
.col-s-5 {
  width: 41.66667%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-5 {
  margin-left: 41.66667%;
}
.col-s-push-5 {
  left: 41.66667%;
}
.col-s-pull-5 {
  left: 41.66667%;
}
.col-s-6 {
  width: 50%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-6 {
  margin-left: 50%;
}
.col-s-push-6 {
  left: 50%;
}
.col-s-pull-6 {
  left: 50%;
}
.col-s-7 {
  width: 58.33333%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-7 {
  margin-left: 58.33333%;
}
.col-s-push-7 {
  left: 58.33333%;
}
.col-s-pull-7 {
  left: 58.33333%;
}
.col-s-8 {
  width: 66.66667%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-8 {
  margin-left: 66.66667%;
}
.col-s-push-8 {
  left: 66.66667%;
}
.col-s-pull-8 {
  left: 66.66667%;
}
.col-s-9 {
  width: 75%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-9 {
  margin-left: 75%;
}
.col-s-push-9 {
  left: 75%;
}
.col-s-pull-9 {
  left: 75%;
}
.col-s-10 {
  width: 83.33333%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-10 {
  margin-left: 83.33333%;
}
.col-s-push-10 {
  left: 83.33333%;
}
.col-s-pull-10 {
  left: 83.33333%;
}
.col-s-11 {
  width: 91.66667%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-11 {
  margin-left: 91.66667%;
}
.col-s-push-11 {
  left: 91.66667%;
}
.col-s-pull-11 {
  left: 91.66667%;
}
.col-s-12 {
  width: 100%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-12 {
  margin-left: 100%;
}
.col-s-push-12 {
  left: 100%;
}
.col-s-pull-12 {
  left: 100%;
}

/*-----------------------------------------------*\
    $Medium Screen
\*-----------------------------------------------*/

@media only screen and (min-width: 640px) {
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-0 {
    margin-left: 0%;
  }
  .col-m-push-0 {
    left: 0%;
  }
  .col-m-pull-0 {
    left: 0%;
  }
  .col-m-1 {
    width: 8.33333%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-1 {
    margin-left: 8.33333%;
  }
  .col-m-push-1 {
    left: 8.33333%;
  }
  .col-m-pull-1 {
    left: 8.33333%;
  }
  .col-m-2 {
    width: 16.66667%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-2 {
    margin-left: 16.66667%;
  }
  .col-m-push-2 {
    left: 16.66667%;
  }
  .col-m-pull-2 {
    left: 16.66667%;
  }
  .col-m-3 {
    width: 25%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-3 {
    margin-left: 25%;
  }
  .col-m-push-3 {
    left: 25%;
  }
  .col-m-pull-3 {
    left: 25%;
  }
  .col-m-4 {
    width: 33.33333%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-4 {
    margin-left: 33.33333%;
  }
  .col-m-push-4 {
    left: 33.33333%;
  }
  .col-m-pull-4 {
    left: 33.33333%;
  }
  .col-m-5 {
    width: 41.66667%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-5 {
    margin-left: 41.66667%;
  }
  .col-m-push-5 {
    left: 41.66667%;
  }
  .col-m-pull-5 {
    left: 41.66667%;
  }
  .col-m-6 {
    width: 50%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-6 {
    margin-left: 50%;
  }
  .col-m-push-6 {
    left: 50%;
  }
  .col-m-pull-6 {
    left: 50%;
  }
  .col-m-7 {
    width: 58.33333%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-7 {
    margin-left: 58.33333%;
  }
  .col-m-push-7 {
    left: 58.33333%;
  }
  .col-m-pull-7 {
    left: 58.33333%;
  }
  .col-m-8 {
    width: 66.66667%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-8 {
    margin-left: 66.66667%;
  }
  .col-m-push-8 {
    left: 66.66667%;
  }
  .col-m-pull-8 {
    left: 66.66667%;
  }
  .col-m-9 {
    width: 75%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-9 {
    margin-left: 75%;
  }
  .col-m-push-9 {
    left: 75%;
  }
  .col-m-pull-9 {
    left: 75%;
  }
  .col-m-10 {
    width: 83.33333%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-10 {
    margin-left: 83.33333%;
  }
  .col-m-push-10 {
    left: 83.33333%;
  }
  .col-m-pull-10 {
    left: 83.33333%;
  }
  .col-m-11 {
    width: 91.66667%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-11 {
    margin-left: 91.66667%;
  }
  .col-m-push-11 {
    left: 91.66667%;
  }
  .col-m-pull-11 {
    left: 91.66667%;
  }
  .col-m-12 {
    width: 100%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-12 {
    margin-left: 100%;
  }
  .col-m-push-12 {
    left: 100%;
  }
  .col-m-pull-12 {
    left: 100%;
  }
  .m-hidden {
    display: none;
  }
  .m-show {
    display: block;
  }
  .s-show {
    display: none;
  }
}

@media only screen and (min-width: 1024px) {
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-0 {
    margin-left: 0%;
  }
  .col-l-push-0 {
    left: 0%;
  }
  .col-l-pull-0 {
    left: 0%;
  }
  .col-l-1 {
    width: 8.33333%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-1 {
    margin-left: 8.33333%;
  }
  .col-l-push-1 {
    left: 8.33333%;
  }
  .col-l-pull-1 {
    left: 8.33333%;
  }
  .col-l-2 {
    width: 16.66667%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-2 {
    margin-left: 16.66667%;
  }
  .col-l-push-2 {
    left: 16.66667%;
  }
  .col-l-pull-2 {
    left: 16.66667%;
  }
  .col-l-3 {
    width: 25%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-3 {
    margin-left: 25%;
  }
  .col-l-push-3 {
    left: 25%;
  }
  .col-l-pull-3 {
    left: 25%;
  }
  .col-l-4 {
    width: 33.33333%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-4 {
    margin-left: 33.33333%;
  }
  .col-l-push-4 {
    left: 33.33333%;
  }
  .col-l-pull-4 {
    left: 33.33333%;
  }
  .col-l-5 {
    width: 41.66667%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-5 {
    margin-left: 41.66667%;
  }
  .col-l-push-5 {
    left: 41.66667%;
  }
  .col-l-pull-5 {
    left: 41.66667%;
  }
  .col-l-6 {
    width: 50%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-6 {
    margin-left: 50%;
  }
  .col-l-push-6 {
    left: 50%;
  }
  .col-l-pull-6 {
    left: 50%;
  }
  .col-l-7 {
    width: 58.33333%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-7 {
    margin-left: 58.33333%;
  }
  .col-l-push-7 {
    left: 58.33333%;
  }
  .col-l-pull-7 {
    left: 58.33333%;
  }
  .col-l-8 {
    width: 66.66667%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-8 {
    margin-left: 66.66667%;
  }
  .col-l-push-8 {
    left: 66.66667%;
  }
  .col-l-pull-8 {
    left: 66.66667%;
  }
  .col-l-9 {
    width: 75%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-9 {
    margin-left: 75%;
  }
  .col-l-push-9 {
    left: 75%;
  }
  .col-l-pull-9 {
    left: 75%;
  }
  .col-l-10 {
    width: 83.33333%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-10 {
    margin-left: 83.33333%;
  }
  .col-l-push-10 {
    left: 83.33333%;
  }
  .col-l-pull-10 {
    left: 83.33333%;
  }
  .col-l-11 {
    width: 91.66667%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-11 {
    margin-left: 91.66667%;
  }
  .col-l-push-11 {
    left: 91.66667%;
  }
  .col-l-pull-11 {
    left: 91.66667%;
  }
  .col-l-12 {
    width: 100%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-12 {
    margin-left: 100%;
  }
  .col-l-push-12 {
    left: 100%;
  }
  .col-l-pull-12 {
    left: 100%;
  }
  .l-hidden {
    display: none;
  }
  .l-show {
    display: block;
  }
  .m-show {
    display: none;
  }
}

Avez-vous une idée du problème dans mon code css ?

Merci d'avance

Bonne journée
Thierry

_laurent

Modérateur

17 Apr 2019 à 12:22

Salut,

J'ai failli me faire une crampe a l'index en scrollant ton post

- il faut donner une position relative a ton site-container
- il ne faut pas mettre ton footer dans une row
- il ne faut pas donner la classe col-s-12 à ton footer (si tu en a besoin, cree un container dedans)
- il ne faut pas donner de hauteur a ton footer

https://jsfiddle.net/undless/atjk3zL5/1/
Modifié par _laurent (17 Apr 2019 - 12:24)

_laurent

Modérateur

17 Apr 2019 à 12:24

ps : tu as oublié le point devant la classe "site-container"

THIRT05

17 Apr 2019 à 12:31

Bonjour _laurent,

en tout cas, je tiens déjà à vous remercier pour votre réponse à mon message. Je vais de suite essayer votre solution qui devrait naturellement très bien fonctionner. -:)

En effet, le CSS est assez long. Je comprends votre douleur ... -:)

Encore merci pour vos explications et votre solution. Je vous tiens au courant dès que c'est fait.

Bonne journée à vous,
Thierry

THIRT05

17 Apr 2019 à 13:51

Bonjour,

j'ai obtenu le résultat escompté mais j'ai toujours un petit souci.

En fait, la couleur d'arrière-plan de mon body ne couvre pas tout le body mais seulement une partie.

Voici mon code HTML :


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <meta name="description" content="website">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon site web</title>
</head>
<body>
<div class="site-container">
    <div class="row">
        <header class="header col-s-12">
            <a href="#" class="header__logo">Logo</a>
        </header>
    </div>
    <div class="row">
        <div class="site-content">
			<div class="row">
                <div class="sidebar-left col-s-2 col-m-2"></div>
                <div class="container col-s-8 col-m-8">
                    <div class="info">
						<h2>Bienvenu sur mon site.</h2>
						<p>
								Amy has been receiving phone calls for a year, where the caller stammers and then hangs up. The calls are from Kif, who is in love with Amy but is too nervous to speak. Zapp realizes that Amy and Leela know each other, and asks the two of them to go on a double date with him and Kif. Leela agrees as a favor to Amy, and they go to a restaurant aboard a space liner.

Kif uses Zapp's characteristically boorish pick-up lines, offending Amy. To prevent her and Leela from leaving, Kif sings karaoke. Amy is touched by this, but Zapp pushes Kif off the stage and sings to Leela, causing the passengers and crew of the ship to flee the restaurant in terror. Zapp crashes the ship into the planet Amazonia, where the Amazonians, a race of giant, muscular, tribal women, capture them.

Fry and Bender travel to Amazonia to rescue their friends but are also captured. They are taken to the Amazonians' leader, observing Amazonian society along the way. Fry, Zapp, and Bender ridicule female values, which makes Leela and Amy appreciate how good life would be without men. When the Amazonians ask what the purpose of men is, Amy explains, and the Amazonians realize that what she is describing is snu-snu, something they have heard of, but never experienced.
						</p>
					</div>
				</div>
                <div class="sidebar-right col-s-2 col-m-2"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <footer class="main_footer">
            <p>
                <span class="muted">Website &copy; 2019</span><span class="footer_info_inline"> | </span>
                <a href="#">Page Facebook</a> .
                <a href="#">Page Google+</a> .
                <a href="#">Page Youtube</a>
            </p>
        </footer>
    </div>
</div>
</body>
</html>

Voici mon code CSS :


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  line-height: 1.4;
  height: 100%;
}
a {
  text-decoration: none;
  color: #757575;
}
.site-container {
  min-height: 100%;
  position: relative;
  overflow: hidden;
}
.header {
  position: fixed;
  left: 0;
  right: 0;
  height: 55px;
  line-height: 55px;
  color: #FFF;
  background-color: #222a35;
}
.header__logo {
  padding-left: 15px;
}
.site-content {
  background-color: #f2f2f2;
}
.container {
  overflow: hidden;
  *zoom: 1;
}
.main_footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 55px;
  color: #FFF;
  background-color: #222a35;
}
.main_footer p {
  text-align: center;
}
.main_footer .footer_info_inline {
  display: none;
}
.main_footer a {
  display: block;
}
/*-----------------------------------------------*\
    $RESPONSIVE
\*-----------------------------------------------*/
/*-----------------------------------------------*\
    $Medium Screen
\*-----------------------------------------------*/
@media only screen and (min-width: 640px) {
  .main_footer .footer_info_inline {
    display: inline;
  }
  .main_footer a {
    display: inline;
  }
}

@media only screen and (min-width: 1024px) {
  .main_footer .footer_info_inline {
    display: inline;
  }
  .main_footer a {
    display: inline;
  }
}

/*-----------------------------------------------*\
    $VARIABLES
\*-----------------------------------------------*/
.col-s-1, .col-m-1, .col-l-1, .col-s-2, .col-m-2, .col-l-2, .col-s-3, .col-m-3, .col-l-3, .col-s-4, .col-m-4, .col-l-4, .col-s-5, .col-m-5, .col-l-5, .col-s-6, .col-m-6, .col-l-6, .col-s-7, .col-m-7, .col-l-7, .col-s-8, .col-m-8, .col-l-8, .col-s-9, .col-m-9, .col-l-9, .col-s-10, .col-m-10, .col-l-10, .col-s-11, .col-m-11, .col-l-11, .col-s-12, .col-m-12, .col-l-12 {
  float: left;
  position: relative;
  min-height: 1px;
  padding: 0 10px;
}
.row:before, .row:after {
  content: "";
  display: table;
}
.row:after {
  clear: both;
}
.row {
  zoom: 1;
}

/*-----------------------------------------------*\
    $Class
\*-----------------------------------------------*/
.row {
  margin: 0 -10px;
}

/*-----------------------------------------------*\
    $Grid
\*-----------------------------------------------*/
.m-show {
  display: none;
}
.l-show {
  display: none;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-0 {
  margin-left: 0%;
}
.col-s-push-0 {
  left: 0%;
}
.col-s-pull-0 {
  left: 0%;
}
.col-s-1 {
  width: 8.33333%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-1 {
  margin-left: 8.33333%;
}
.col-s-push-1 {
  left: 8.33333%;
}
.col-s-pull-1 {
  left: 8.33333%;
}
.col-s-2 {
  width: 16.66667%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-2 {
  margin-left: 16.66667%;
}
.col-s-push-2 {
  left: 16.66667%;
}
.col-s-pull-2 {
  left: 16.66667%;
}
.col-s-3 {
  width: 25%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-3 {
  margin-left: 25%;
}
.col-s-push-3 {
  left: 25%;
}
.col-s-pull-3 {
  left: 25%;
}
.col-s-4 {
  width: 33.33333%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-4 {
  margin-left: 33.33333%;
}
.col-s-push-4 {
  left: 33.33333%;
}
.col-s-pull-4 {
  left: 33.33333%;
}
.col-s-5 {
  width: 41.66667%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-5 {
  margin-left: 41.66667%;
}
.col-s-push-5 {
  left: 41.66667%;
}
.col-s-pull-5 {
  left: 41.66667%;
}
.col-s-6 {
  width: 50%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-6 {
  margin-left: 50%;
}
.col-s-push-6 {
  left: 50%;
}
.col-s-pull-6 {
  left: 50%;
}
.col-s-7 {
  width: 58.33333%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-7 {
  margin-left: 58.33333%;
}
.col-s-push-7 {
  left: 58.33333%;
}
.col-s-pull-7 {
  left: 58.33333%;
}
.col-s-8 {
  width: 66.66667%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-8 {
  margin-left: 66.66667%;
}
.col-s-push-8 {
  left: 66.66667%;
}
.col-s-pull-8 {
  left: 66.66667%;
}
.col-s-9 {
  width: 75%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-9 {
  margin-left: 75%;
}
.col-s-push-9 {
  left: 75%;
}
.col-s-pull-9 {
  left: 75%;
}
.col-s-10 {
  width: 83.33333%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-10 {
  margin-left: 83.33333%;
}
.col-s-push-10 {
  left: 83.33333%;
}
.col-s-pull-10 {
  left: 83.33333%;
}
.col-s-11 {
  width: 91.66667%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-11 {
  margin-left: 91.66667%;
}
.col-s-push-11 {
  left: 91.66667%;
}
.col-s-pull-11 {
  left: 91.66667%;
}
.col-s-12 {
  width: 100%;
}
.col-s-center {
  margin: 0 auto;
  float: none;
}
.col-s-offset-12 {
  margin-left: 100%;
}
.col-s-push-12 {
  left: 100%;
}
.col-s-pull-12 {
  left: 100%;
}

/*-----------------------------------------------*\
    $Medium Screen
\*-----------------------------------------------*/

@media only screen and (min-width: 640px) {
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-0 {
    margin-left: 0%;
  }
  .col-m-push-0 {
    left: 0%;
  }
  .col-m-pull-0 {
    left: 0%;
  }
  .col-m-1 {
    width: 8.33333%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-1 {
    margin-left: 8.33333%;
  }
  .col-m-push-1 {
    left: 8.33333%;
  }
  .col-m-pull-1 {
    left: 8.33333%;
  }
  .col-m-2 {
    width: 16.66667%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-2 {
    margin-left: 16.66667%;
  }
  .col-m-push-2 {
    left: 16.66667%;
  }
  .col-m-pull-2 {
    left: 16.66667%;
  }
  .col-m-3 {
    width: 25%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-3 {
    margin-left: 25%;
  }
  .col-m-push-3 {
    left: 25%;
  }
  .col-m-pull-3 {
    left: 25%;
  }
  .col-m-4 {
    width: 33.33333%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-4 {
    margin-left: 33.33333%;
  }
  .col-m-push-4 {
    left: 33.33333%;
  }
  .col-m-pull-4 {
    left: 33.33333%;
  }
  .col-m-5 {
    width: 41.66667%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-5 {
    margin-left: 41.66667%;
  }
  .col-m-push-5 {
    left: 41.66667%;
  }
  .col-m-pull-5 {
    left: 41.66667%;
  }
  .col-m-6 {
    width: 50%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-6 {
    margin-left: 50%;
  }
  .col-m-push-6 {
    left: 50%;
  }
  .col-m-pull-6 {
    left: 50%;
  }
  .col-m-7 {
    width: 58.33333%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-7 {
    margin-left: 58.33333%;
  }
  .col-m-push-7 {
    left: 58.33333%;
  }
  .col-m-pull-7 {
    left: 58.33333%;
  }
  .col-m-8 {
    width: 66.66667%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-8 {
    margin-left: 66.66667%;
  }
  .col-m-push-8 {
    left: 66.66667%;
  }
  .col-m-pull-8 {
    left: 66.66667%;
  }
  .col-m-9 {
    width: 75%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-9 {
    margin-left: 75%;
  }
  .col-m-push-9 {
    left: 75%;
  }
  .col-m-pull-9 {
    left: 75%;
  }
  .col-m-10 {
    width: 83.33333%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-10 {
    margin-left: 83.33333%;
  }
  .col-m-push-10 {
    left: 83.33333%;
  }
  .col-m-pull-10 {
    left: 83.33333%;
  }
  .col-m-11 {
    width: 91.66667%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-11 {
    margin-left: 91.66667%;
  }
  .col-m-push-11 {
    left: 91.66667%;
  }
  .col-m-pull-11 {
    left: 91.66667%;
  }
  .col-m-12 {
    width: 100%;
  }
  .col-m-center {
    margin: 0 auto;
    float: none;
  }
  .col-m-offset-12 {
    margin-left: 100%;
  }
  .col-m-push-12 {
    left: 100%;
  }
  .col-m-pull-12 {
    left: 100%;
  }
  .m-hidden {
    display: none;
  }
  .m-show {
    display: block;
  }
  .s-show {
    display: none;
  }
}

@media only screen and (min-width: 1024px) {
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-0 {
    margin-left: 0%;
  }
  .col-l-push-0 {
    left: 0%;
  }
  .col-l-pull-0 {
    left: 0%;
  }
  .col-l-1 {
    width: 8.33333%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-1 {
    margin-left: 8.33333%;
  }
  .col-l-push-1 {
    left: 8.33333%;
  }
  .col-l-pull-1 {
    left: 8.33333%;
  }
  .col-l-2 {
    width: 16.66667%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-2 {
    margin-left: 16.66667%;
  }
  .col-l-push-2 {
    left: 16.66667%;
  }
  .col-l-pull-2 {
    left: 16.66667%;
  }
  .col-l-3 {
    width: 25%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-3 {
    margin-left: 25%;
  }
  .col-l-push-3 {
    left: 25%;
  }
  .col-l-pull-3 {
    left: 25%;
  }
  .col-l-4 {
    width: 33.33333%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-4 {
    margin-left: 33.33333%;
  }
  .col-l-push-4 {
    left: 33.33333%;
  }
  .col-l-pull-4 {
    left: 33.33333%;
  }
  .col-l-5 {
    width: 41.66667%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-5 {
    margin-left: 41.66667%;
  }
  .col-l-push-5 {
    left: 41.66667%;
  }
  .col-l-pull-5 {
    left: 41.66667%;
  }
  .col-l-6 {
    width: 50%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-6 {
    margin-left: 50%;
  }
  .col-l-push-6 {
    left: 50%;
  }
  .col-l-pull-6 {
    left: 50%;
  }
  .col-l-7 {
    width: 58.33333%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-7 {
    margin-left: 58.33333%;
  }
  .col-l-push-7 {
    left: 58.33333%;
  }
  .col-l-pull-7 {
    left: 58.33333%;
  }
  .col-l-8 {
    width: 66.66667%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-8 {
    margin-left: 66.66667%;
  }
  .col-l-push-8 {
    left: 66.66667%;
  }
  .col-l-pull-8 {
    left: 66.66667%;
  }
  .col-l-9 {
    width: 75%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-9 {
    margin-left: 75%;
  }
  .col-l-push-9 {
    left: 75%;
  }
  .col-l-pull-9 {
    left: 75%;
  }
  .col-l-10 {
    width: 83.33333%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-10 {
    margin-left: 83.33333%;
  }
  .col-l-push-10 {
    left: 83.33333%;
  }
  .col-l-pull-10 {
    left: 83.33333%;
  }
  .col-l-11 {
    width: 91.66667%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-11 {
    margin-left: 91.66667%;
  }
  .col-l-push-11 {
    left: 91.66667%;
  }
  .col-l-pull-11 {
    left: 91.66667%;
  }
  .col-l-12 {
    width: 100%;
  }
  .col-l-center {
    margin: 0 auto;
    float: none;
  }
  .col-l-offset-12 {
    margin-left: 100%;
  }
  .col-l-push-12 {
    left: 100%;
  }
  .col-l-pull-12 {
    left: 100%;
  }
  .l-hidden {
    display: none;
  }
  .l-show {
    display: block;
  }
  .m-show {
    display: none;
  }
}

Merci d'avance pour votre aide.

Bonne journée
Thierry

_laurent

Modérateur

17 Apr 2019 à 14:06

Re,

Alors,

Tu as laissé le footer dans une row. c'est pas gênant vu que le footer est en absolute mais ca peut le devenir si la classe row fini par avoir un positionnement et surtout c'est pas utile :

    <div class="row">
        <footer class="main_footer">
        </footer>
    </div>

pour ton soucis de background tu ne donne une couleur de background qu'a ton bloc .site-content et du coup lorsque le contenu est moins grand que l'écran, et bien ton bloc ne va pas jusqu'en bas de la page. Deux solutions :

- mettre le background directement sur le body de ton site
- faire en sorte que la hauteur de ton bloc site-content soit au minimum de 100% min-height:100%;

THIRT05

17 Apr 2019 à 14:13

Bonjour _laurent,

une fois de plus, je tenais à vous remercier pour votre réponse rapide à mon problème.

J'ai opté pour la 2ème solution c'est-à-dire que la hauteur du bloc "site-content" soit au minimum de 100% (min-height: 100%;).

ça donne le résultat escompté. -:)

Pour le footer, je vais enlever la div "row" sur base de vos conseils.

Encore merci pour votre aide et bonne journée à vous.
Thierry

Pedrothelion

19 Apr 2019 à 14:28

Concours de recopiage de bootstrap.css ?

THIRT05

19 Apr 2019 à 14:34

Pourquoi recopiage de bootstrap ???

c'est du code généré à partir de SASS !!!

_laurent

Modérateur

19 Apr 2019 à 15:05

Pedrothelion a écrit :
Concours de recopiage de bootstrap.css ?

Hehehehe

THIRT05 a écrit :
Pourquoi recopiage de bootstrap ???
c'est du code généré à partir de SASS !!!

Bah ca ressemble fortement aux classes par défaut d'un framework css c'est tout. Smiley lol

Au passage, le code :

.col-s-center {
  margin: 0 auto;
  float: none;
}

est exactement 13 fois dans ton code. Smiley sweatdrop

t'as du te viander dans une boucle sass.

THIRT05

19 Apr 2019 à 15:19

Bonjour _laurent,

merci pour votre remarque.

Je vais en tenir compte.

Bon week-end ...

Thierry

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Footer toujours en bas de page ...