26744 sujets

CSS et mise en forme, CSS3

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
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)
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
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
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%;
Meilleure solution
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 a écrit :
Concours de recopiage de bootstrap.css ?

Hehehehe Smiley lol

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.