Résolu Footer fixé en bas de page

Rémi C

Rémi C

Premium
Inscription
11 Novembre 2014
Messages
149
Réactions
7
Points
13 751
RGCoins
50
Bonjour,

Quand j'affiche une un div de class "alert" ma footer ce mais pas en bas de la page mais au 3 tiers de la page comment je peut faire pour qu'elle reste fixé en bas de la page


Screen :

6503ff1d5e6578739d63cf7d8bcf75a7.png


Mon code html

Code: 
<?php
namespace remi\register;

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="Images/favicon.ico">

    <title>NB|Rémi - S'inscire</title>

    <!-- CSS BOOSTRAP -->
    <link href="Style/CSS/App.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="Style/CSS/style.css" rel="stylesheet">
</head>
<body>
<div class="page-width">
     <div class="header">
            <div class="logo">
                 <img src="Images/logo.png">
            </div>
            <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
      <ul class="nav navbar-nav">
        <li class="active"><a href="login.php">Login <span class="sr-only">(current)</span></a></li>
        <li><a href="#">S'inscire</a></li>
          </ul>
    </div>
  </div>
</nav>
     </div><!-- Fin header -->
     <div class="container">
     <div class="alert alert-danger">
     test <br>
     test
     </div>
          <div class="panel panel-primary">
               <div class="panel-heading">S'identifier</div>
               <div class="panel-body">
                   <form action="" method="post">
                         <input type="text" name="username" class="form-control" placeholder="Username...">
                         <br>
                         <input type="password" name="password" class="form-control" placeholder="Password...">
                         <br>
                         <input type="email" name="email" class="form-control" placeholder="Email...">
                         <br>
                         <input type="text" name="key" class="form-control" placeholder="Clé de sécurité...">
                         <br>
                         <button type="submit" class="btn btn-primary" name="submit" style="width: 100%;">S'inscire</button>
                   </form>
               </div>
          </div>
     </div>
</div><!-- Page Width -->
<footer id="footer">
    <div class="container">
        <div class="text">Copyright 2016 / By Rémi BZH</div>
    </div>
</footer>
</body>
</html>

CSS de la footer

Code: 
#footer {
    position: absolute;
    bottom: 0;
    background-color: black;
}
 
Trier par date Trier par votes
J'ai trouvé voici le code qui faut

Code: 
.page-width {
  width: 100%;
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px;
  background-color: blue; }

.page-width:after {
  content: "";
  display: block; }

#footer, .page-width:after {
  height: 142px;}

#footer {
  width: 100%;
  background-color: black; }
 
Voter positivement 0 Voter négativement
Retour
Haut