web-dev-qa-db-fra.com

Bootstrap Footer, pleine largeur de la page

je conçois un site Web avec joomla et utilise le framework bootstrap. Maintenant, j'ai un problème avec mon pied de page. En gros, j’utilise une simple disposition en grille et je veux que le contenu du site se trouve au centre de la page, avec un espace à gauche et à droite, ce que j’ai déjà réalisé. Et maintenant, je ne veux pas que le pied de page milieu comme le contenu mais à la fin de la page et sur toute la largeur et NON FIXE. Donc, je veux normalement faire défiler la page vers le bas et à la fin, le pied de page doit apparaître en pleine largeur. Je l’ai cherché longtemps, mais je n’ai trouvé aucune solution qui ait fonctionné. I J'espère que quelqu'un pourra m'aider à y parvenir ...

Ci-dessous, les scripts de la page php et du fichier css que j'ai utilisé

index.php

<!DOCTYPE html>
<html>
<head>
    <jdoc:include type="head" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- main container -->
    <div class='container'>
        <!-- header -->
        <div class="mainMenuTop"/>
        <div class='row'>
            <jdoc:include type="modules" name="position-1" style="well" />
        </div>
        <div class='row'>
            <!-- main content area -->
            <div class='span12'>
                <div class="article">
                    <jdoc:include type="component" />
                </div>
            </div>
        </div>
        <!-- footer -->
        <div class='row'>
            <div class='span12'>
                <div class='footer'>
                <jdoc:include type="modules" name="footer" style="none" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

style.css

body 
{
    overflow-y: scroll;
    background: url(../images/Test.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
 }

.article
{
    padding: 25px;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255); /* The Fallback */
    font-size: 12pt;
    font-family:"Calibri", Times, serif;
}

.footer
{
    height: 50px;
    border-top: solid 1px black;
}

Cordialement, Oodoloo

twitter-bootstrapfooter
6
oodoloo

Vous pouvez mettre votre pied de page en séparant <div class="container"> après le conteneur de contenu principal. Vous pouvez ensuite affecter une classe de conteneur qui ne limite pas la largeur du pied de page, comme cela se produit avec le contenu principal. Par exemple.::

<div class="container">
      ...
</div>
<div id="footer" class="container-fluid">
    <div class="row">....</div>
</div>
13
Mikko Ohtamaa

pour mes besoins, maintenant je l'ai corrigé comme vous pouvez le voir ici: jsfiddle-example

.footer
{
    height: 50px;
    background-color: black;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
}

J'ai ajouté les mots "width: 100%", "position: absolute", "left: 0" et "right: 0" dans la classe css ".footer". Je pense que la "position: absolue ". Ensuite, je dois ajouter le" gauche: 0 "car le côté gauche ne prend pas la taille maximale. après avoir ajouté ceci, le cas échéant. Le "droit: 0" est ajouté, à cause de son exhaustivité. Ne sait pas si cela est nécessaire dans un autre navigateur. Ici ça marche aussi sans ça.

2
oodoloo

Je fais ça et c'est juste:

@media(max-width:500px){

    .footer{
        float:left;
        width:109%;
        margin-left:-5%;
    }

}
0
Cristian