Placer correctement mon footer

Thom Leroy
Les bases HTML/CSS

Bonjour. Sur mon site je rencontre un petit soucis, lié au footer. Je souhaite que le footer reste en bas de la page, peu importe la hauteur de celle-ci, cependant j'ai toujours :

  • Mon contenu;
  • Mon footer;
  • Un écart blanc tout moche.

Et je n'arrive pas à retirer cet écart blanc. Un image sera un peu plus parlante (j'ai mis le footer en rouge pour la visibilité) :
http://zupimages.net/viewer.php?id=17/07/fjlu.png

Au niveau de mon code, il est comme ceci :

<body>
<div class="wrap">
    <div class="container-fluid">
        @include('extends.navigation')

        <div class="row">

            <div class="title">
                @yield('title')
            </div>

            @include('flash.flash')
            @include('extends.menu')

            @yield('content')

        </div>
    </div>
    <footer class="footer"></footer>
</div>
//...........

Et mon CSS est comme ceci :

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

body {
    padding-top: 20px;
    margin-bottom: 60px;
}

/* Custom page footer */
.footer {
    bottom: 0;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: red;
}

.container-fluid {
    max-width: 1550px;
}

.title {
    text-align: center;
    padding: 14px 24px 50px;
    font-size: 21px;
}

.wrap{
    position: relative;
    min-height: 100%;
}

J'ai été fouiller un peu partout, notamment sur un ou deux posts présent sur le site, mais ça n'a pas marché, soit j'ai mal appliqué les réponses, soit ça ne correspondait pas à mon problème.

Voilà, si vous avez une idée qui peut m'aider à mettre correctement ce footer, je suis preneur :)
Merci d'avance !

6 réponses

SLK

Salut,

Sur body, tu as mis un margin-bottom de la même hauteur que le footer (60px).
Du coup tu as mis un bottom: 0 sur le footer, pour qu'il soit tout en bas, et prenne la place libéré par le margin-bottom du body.

Dis moi si je me trompe hein.

Mais si c'est ça,
il me semble que, pour qu'un élément prenne en compte la propriété CSS bottom, il DOIT être "positionné" (relative, absolute, fixed, ou l'autre dont je ne me rappel plus).
En plus, le bottom: 0 ne va pas le placer en bas de l'écran, mais en bas du 1er élément positionné, donc attention.

En fait je crois qu'il faut changer un peu la structure HTML,
et on enlève les position et bottom, et on déplace le margin-bottom au bon endroit :

<body>
    <div class="global-container">

        // du contenu

        <div class="wrap">
            <div class="container-fluid">
                @include('extends.navigation')

                <div class="row">

                    <div class="title">
                        @yield('title')
                    </div>

                    @include('flash.flash')
                    @include('extends.menu')

                    @yield('content')

                </div>
            </div>
        </div>

        // encore du contenu...

    </div>

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

avec le CSS 

body {
    padding-top: 20px;
    /* margin-bottom: 60px; Ça on le déplace sur global-container */
}

.global-container {
    margin-bottom: 60px;
}

.footer {
    /* bottom: 0; Ça on supprime */
    ...
}

Est-ce que ça convient ?

Thom Leroy
Auteur

Bonjour, merci pour ta réponse.
J'ai fait de la manière dont tu m'as proposé, et ça fonctionne. Maintenant, j'ai découvert un autre problème. Sur ma page, comme tu peux le voir sur l'image j'ai un système de commentaires, avec un boutton "écrire un commentaire" qui affiche ou réduit le formulaire de commentaires.

Lorsque j'affiche mon formulaire de commentaires, la page s'aggrandit, mais le footer ne bouge pas et du coup ne se retrouve plus en bas de la page.
Même chose lorsque j'écris un commentaire, la page va s'agrandir, mais le footer ne va pas bouger.

En inspectant le code, j'ai remarqué que ma balise body ne prenait pas en compte la nouvelle hauteur après l'affichage du commentaire (et du formulaire quand je clique sur le boutton), j'ai essayé de mettre un "height : 100%" mais ça ne fonctionne pas

SLK

Ah zut.

Du coup, montre nous aussi les codes HTML/CSS de la partie "Écrire un commentaire".

j'ai remarqué que ma balise body ne prenait pas en compte la nouvelle hauteur après l'affichage du commentaire

Si la nouvelle hauteur n'est pas prise en compte, c'est probablement que la partie "Écrire un commentaire" n'est pas dans le flux, c'est à dire qu'elle à été "positionné" en CSS (elle a la propriété position).
Il faut surement retirer cette propriété, mais c'est difficile à dire sans le code sous les yeux.

Thom Leroy
Auteur

Bonjour,

Du coup, la partie "form" qui sert à écrire mon commentaire :

{!! Form::open(['url' => action('CommentsController@store')]) !!}

<div id="opt" class="form-group">

    <p><button id="link" class="btn btn-link" type="button" onclick="toggle_div(this,'comms');">Ecrire un commentaire
        </button></p>
</div>
<div style="display: none;" class="row" id="comms">

    <div class='col-md-offset-2 col-md-8'>
        {!! Form::textarea('content', null, ['class' => 'form-control']) !!}
    </div>
    <button type="submit" class="col-md-1 col-md-offset-2 btn btn-primary" id="comment">
        <i class="fa fa-btn fa-sign-in"></i>Envoyer
    </button>
        {!! Form::hidden('produit_id', $jeux->id) !!}
</div>

{!! Form::close() !!}

La function toggle _ div qui sert à masquer le formulaire et l'afficher en cliquand sur le boutton :

<script type="text/javascript">
    function toggle_div(bouton, id) { 
        var div = document.getElementById(id); 
        if(div.style.display=="none") {

            div.style.display = "block"; 
            bouton.innerHTML = "Réduire";
        } else { 

            div.style.display = "none"; 
            bouton.innerHTML = "Ecrire un commentaire"; 
        }
    }
</script>

Cette partie form à ce code css (form.css) : 

#link{
    border: 1px solid #2780e3;
}

.eml{
    margin-bottom: 10px;
}

#comment{
    margin-top: 10px;
    margin-left: 46.2%;
}

Mon fichier index qui liste les commentaires :

@foreach($comments as $comment)
    <div class="co col-md-12">
        <div class="co1 col-md-1">
            @if(isset($comment->user->avatar))
                <img class="imguser" src="{{url("public{$comment->user->avatar}") }}">
            @else
                <img class="imguser" src="{{url("public/images/avatar/default.jpg") }}">
            @endif
        </div>
        <div class="col-md-1">
            <p class="c1"><strong>{{$comment->pseudo}}</strong></p>
            <em>{{$comment->created_at->diffForHumans()}}</em>
        </div>
        <div class="c8 col-md-9">
            <div class="cm">
                <p class="text-right">
                    //réponse+edit+supprimer
                </p>
            </div>
            <div class="texx">
                {{$comment->content}}
            </div>
        </div>
        @include('comments.replies')
    </div>
@endforeach

Elle a comme fichier css (main.css) :

.co{
    margin-top: 15px;
}

.imguser{
    height: 100px;
    width: 100px;
}

.c1{
    background-color: rgba(237, 237, 237, 1);
    text-align: center;
}

.cm{
    height: 26px;
    border-bottom: 1px solid #2780e3;
}

.texx{
    font-size: 16px;
    margin-top: 2px;
    margin-left: 3px;
}

.remove{
    color: rgba(168, 0, 0, 0.66);
}

Et la partie comments.replies est presque la même à un foreach prêt, elle sert à afficher mes réponses aux commentaires.

Du coup, je n'ai pas utilisé de "position" dans mes classes/id, ou alors la propriété "margin" sert de positionnement, et dans ce cas j'ai pas mal de travail ^^

SLK

Ton "formulaire de commentaires" correspond bien à ce bout de code ?

<div class='col-md-offset-2 col-md-8'>
    {!! Form::textarea('content', null, ['class' => 'form-control']) !!}
</div>

Je pense que oui, mais je préfère que tu confirmes. (je ne connais pas ce genre de code, j'ai un peu de mal)

Ce 'div' à pour "parent", le 'div' qui à l'id comms,
tu n'as pas de #comms dans ton CSS ?
(j'espérais y voir la propriété position)
Si non, désolé je sèche... :'(

Avec ce genre de code :

{!! Form::open(['url' => action('CommentsController@store')]) !!}

Je ne sais pas s'il y a un id ou une classe sur la balise form, je ne sais pas trop à quoi m'en tenir.

[EDIT]

Du coup, je n'ai pas utilisé de "position" dans mes classes/id

Ah j'avais mal lu désolé...
Zut, je ne vois pas pourquoi alors...

Thom Leroy
Auteur

Salut.

Du coup je vais aller essayer de refaire mes codes CSS, j'ai peut-être mal fait quelque chose, à voir.

Je reviens aussi sur ce que je disais, avec ma balise <body> qui ne prenait pas toute la hauteur, ça se passe également sur ma page d'acceuil, qui elle n'a pas de scrollbar. Ma balise html prends toute la hauteur, mais la balise body laisse ~120px.