Bonjour,

Voila je rencontre un petit problème avec mon code.

En positionnant un footer en position absolute, avec un bottom 0, right 0 et left 0 :
• En plein écran: aucun soucis, le footer viens se positionner en bas de la page
• En réduisant l'écran, le footer remonte
Donc j'aimerai qu'il reste toujours en bas de l'écran, mais je ne veux ni du fixe, ni du sticky..

Merci d'avance !

Mon code index.php:

<?php 
    session_start();
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="author" content="Florent Mirey">
    <link href="style.css" rel="stylesheet">

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
    <header>
        <nav>
            <div class="nav-wrapper">
                <a href="#!" class="brand-logo">Logo</a>
                <a href="#" data-target="mobile-demo" class="sidenav-trigger left"><i class="material-icons">menu</i></a>
                <ul class="right hide-on-med-and-down">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">Javascript</a></li>
                <li><a href="mobile.html">Mobile</a></li>
                </ul>
            </div>
        </nav>

        <ul class="sidenav" id="mobile-demo">
            <li><a href="sass.html">Sass</a></li>
            <li><a href="badges.html">Components</a></li>
            <li><a href="collapsible.html">Javascript</a></li>
            <li><a href="mobile.html">Mobile</a></li>
        </ul>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('.sidenav');
            var instances = M.Sidenav.init(elems, {edge:'left'});
        });
        </script>
    </header>

    <?php
        if(isset($_SESSION['flash'])){ 
            foreach($_SESSION['flash'] as $type => $message): ?>
            <div id="alert" class="alert alert-<?= $type; ?> infoMessage"><a class="closef">X</span></a>
                <?= $message; ?>
            </div>    
    <?php
            endforeach;
        unset($_SESSION['flash']);}
    ?>

    <div class="main">
        <div class="container">
            <div class="item">item 1</div>
            <div class="item">item 2</div>
            <div class="item">item 3</div>
        </div>
    </div>
    <footer> 
        &copy;<?php echo date('Y'); ?> - Flomir YouTube
    </footer>
    </body>
</html>

Mon code style.css :

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  font-family: sans-serif;
}

body {
  position: relative;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  line-height: 1.8;
  color: #404852;
  -webkit-font-smoothing: antialiased;
  background: #2998cd;
}

header {
  position: relative;
}

.main {
  position: relative;
  padding-bottom: 100px;
}

.container {
  position: relative;
  min-height: 100%;
  top: 50px;
  padding: 10px;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.item {
  background: cyan;
  padding: 100px;
  margin: 10px;
}

footer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
  background: #303841;
  color: #fff;
  padding: 15px;
  height: 100px;
  font-family: inherit;
}

3 réponses


Flomir
Auteur

Merci pour ton lien, ayant essayé le code, cela ne fonctionne pas

Salut.

Pas très clair cette phrase : "Donc j'aimerai qu'il reste toujours en bas de l'écran, mais je ne veux ni du fixe, ni du sticky.."
L'exemple proposé par mon camarade semble pourtant répondre à ton besoin.
Sur cette démo le comportement est-il celui attendu ?
Si oui c'est qu'il y a une interaction avec le reste de ton code ou une mauvaise mise en oeuvre.
Si non explique nous mieux ce que tu attends.
A voir s'il n'y a pas d'interaction avec le reste de ton code.

Peut-être peux-tu nous mettre ton code sur un Codepen ou JSBin pour voir sans se retapper tout.

Sinon : avec Flex
https://jsfiddle.net/r2ta454d/21/

Avec un positionnement en absolu :
https://codepen.io/cbracco/pen/zekgx