Home > other >  Footer refuses to stick to the bottom in mobile version, only html and css
Footer refuses to stick to the bottom in mobile version, only html and css

Time：12-29

[Mobile Version][1] [1]: https://i.stack.imgur.com/vC88y.jpg

[Desktop version][1] [2]: https://i.stack.imgur.com/BjuV2.jpg

The desktop version and tablette is fine, but once i go to the mobile version my footer just seems to be stuck in the "Activity bloc"

I tried to put a hight on the footer, he moves to the bottom but the responsive doesn't accept it, did someone ever had to deal with something similar ? appreciate your answers, if needed i can send you the hole code.

CodePudding user response：

.CubeFoot {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}

CodePudding user response：

/*
 * style.css-desktop
 * 
 * définition des styles généraux à la page
 * 
 * @autor JANSEN Manuel
 * @version 1.0
 * @date 2021-11
 */


/*
 * définition des polices de caractères
 */


/* 
 *Page (sans footer) 
 */

body{
    background-color: white;
}

.blocPage {
    max-width: 100%;
    margin-left: 2vw;
    margin-right: 2vw;
}


/* 
 *NAV 
 */

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

nav > img {
    margin-top: 1vw;
    margin-left: 2vw;
    width: 6.5vw;
    height: 4vw;
}

nav > div {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 20%;
}

nav > div > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7vw;
    height: 5.2vw;
    font-size: 1vw;
}

.fa-map-marker-alt:before {
    font-size:1vw ;
}

/*
 *Header
 */

header > h1 {
    font-size: 1.4vw;
}

header > p {
    font-size: 1vw;
}

header {
    padding-left: 1vw;
}

.Recherche {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24vw;
    border-radius: 1vw;
    height: 2.7vw;
}

.fa-map-marker-alt {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.7vw;
    height: 2.7vw;
    border-radius: 0.8vw 0 0 0.8vw;
}

.Recherche > input {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.7vw;
    width: 14vw;
    font-size: 1.2vw;
    padding-left: 1vw;
}


/** 
 * Bouton Recherche
 */

.Recherche > button {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 2.7vw;
    width: 8vw;
    border-radius: 0 1vw 1vw 0;
    font-size: 1.2vw;
}

.Recherche >  span {
    display: none;
}

/*
 *Filtres 
 */

.fa-money-bill-wave {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2.5vw;
    width: 2.6vw;
    height: 2.6vw;
}

.fa-child {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2.5vw;
    width: 2.6vw;
    height: 2.6vw;
}

.fa-heart {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2.5vw;
    width: 2.6vw;
    height: 2.6vw;
}

.fa-dog {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2.5vw;
    width: 2.6vw;
    height: 2.6vw;
}

.filtres {
    display: flex;
    align-items: center;
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.Filtre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.3vw;
    height: 2.4vw;
    border-radius: 2.5vw;
    margin-right: 2vw;
}

.Filtre > p {
    display: flex;
justify-content: center;
align-items: flex-start;
padding-left: 1.1vw;
padding-right: 1.5vw;
font-size: 1.1vw;
}

header > div > h2 {
    display: flex;
    font-size: 1.2vw;
    padding-right: 1vw;
}

/* 
 *INFO Icone
 */

.info {
    display: flex;
    align-items: center;
    display: flex;
    margin-bottom: 1.5%;
    font-size: 1vw;
}

.info > i {
    width: 1vw;
    height: 1vw;
    border-radius: 2.5vw;
    margin-right: 0.5vw;
}

.fa-info {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* 
 *Hebergements
 */
 
 .hebergements {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.cubeDetailsHebergements > h3 {
    font-size: 1.2vw;
    margin: 0;
}

.cubeDetailsHebergements > p {
    font-size: 1vw;
    margin: 0;
}

.blocHebergements {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    flex: 2;
    height: 47vw;
    border-radius: 2.5vw;
    margin-right: 3vw;
    padding-left: 3vw;
    padding-right: 3vw;
}

.blocHebergements > h1 {
    flex: 1 1 100%;
    font-size: 2vw;
    margin: 0;
    margin-top: 2vw;
} 


.cubeHebergements {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    border-radius: 1.5vw;
    box-shadow: 5px 5px 5px 1px #e3e3e3;
    overflow: hidden;
    height: 31%;
    padding: 0.1% 0.5% 0.2% 0.5%;
    
}

.cubeDetailsHebergements {
    width: 90%;
}

.imgHebergements {
    width: 100%;
    height: 70%;
    border-radius: 1.2vw 1.2vw 0 0;
}

section > div > a{
    padding-left: 2%;
    font-size: 1.3vw;
    padding-bottom: 2%;
}


/*
 * Populaires 
 */

.blocchart {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2vw;
}

.blocchart > h1{
font-size: 2vw;
margin-bottom: 1.5vw;
}


.fa-2x {
    font-size: 2vw;
}

.active {
    font-size: 1vw;
}

.desactive {
    font-size: 1vw;
}


.blocPopulaires {
   flex: 1;
    height: 47vw;
    border-radius: 2vw;
    padding-left: 2.5vw;
    padding-right: 2.5vw;
}

.cubePopulaire {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vw;
    padding: 1% 0 1% 1%;
    border-radius: 1.5vw;
    box-shadow: 5px 5px 5px 1px #e3e3e3;
    overflow: hidden;
    margin-bottom: 2vw;
    margin-top: 1vw;
}

.cubeDetailsPopulaires {
    width: 60%;
    height: 95%;
    padding-left: 1.5vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.cubeDetailsPopulaires > h3{
    font-size: 1.5vw;
    width: 100%;
    margin: 0;
}

.cubeDetailsPopulaires > p {
    font-family: 'Raleway Regular';
    font-size: 1.3vw;
    margin: 0;
    width: 100%;
    height: 50%;
}

.imgPopulaire {
    background-size: cover;
    background-position: center;
    object-fit: cover;
    width: 35%;
    height: 10vw;
    border-radius: 1.2vw 0 0 1.2vw;
}

/*
 * Activités
 */

.Activites {
    margin-top: 50px;
    margin-bottom: 50px;
}

/*
 *reglage bloc
 */

h6 {
    display: flex;
    font-size: 2vw;
    margin: 0;
    padding-bottom: 1vw;
}

.blocActivites {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 36vw;
}

.cubeActivite {
    min-width: 22vw;
    max-width: 22vw;
    border-radius: 15px;
    box-shadow: 5px 5px 5px 1px #e3e3e3;
    overflow: hidden;
    flex: 1;
    margin-left: 1vw;
    margin-right: 1vw;
    min-height: 17vw;
}

.cubeActivite:nth-child(1) {
    margin-left: 0;
}

.cubeActivite:nth-child(5),
.cubeActivite:nth-child(6) {
    margin-right: 0;
}

.cubeActivite:nth-child(1),
.cubeActivite:nth-child(4) {
    flex: 36vw;
}

.cubeActivite:nth-child(3),
.cubeActivite:nth-child(6) {
    margin-top: 2vw;
}

.cubeActivite > img {
    width: fit-content;
    margin: auto;
    display: block;
    object-fit: cover;
    object-position: center center;
    height: 14vw;
    min-width: 100%;
    margin-bottom: 0.5vw;
}

.cubeActivite:nth-child(1)>img,
.cubeActivite:nth-child(4)>img {
    height: 33vw;
}

.cubeActivite>h3 {
    font-size: 1.4vw;
    padding-left: 1vw;
    font-weight: normal;
    margin: 0;
}

/*
 *fin reglage bloc
 */


/*
  *footer
  */

.CubeFoot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 14vw;
    padding-top: 1vw;
}

.tailleBlocFooter {
    height: 12vw;
    margin-left: 5%;
    margin-right: 15%;
    margin-top: 2%;
}

.CubeFoot > div > h3 {
    font-size: 1.1vw;
}

.CubeFoot > div > a {
    display: flex;
    padding-bottom: 1vw;
    font-size: 0.9vw;
}
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <script src="https://kit.fontawesome.com/4261697ffa.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="normalize.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- styles généraux -->
    <link rel="stylesheet" href="style-desktop.css" type="text/css" />
    <link rel="stylesheet" media="(max-width: 992px)" href="style-tablette.css" type="text/css" />
    <link rel="stylesheet" media="(max-width: 768px)" href="style-mobile.css" type="text/css" />
    <title>Booki</title>
</head>

<body>
    <div >
        <nav>
            <img src="imagesdekstop/Booki.png" alt="Logo Booki" />
            <div>
                <a href="#hebergements">Hébergements</a>
                <a href="#activites">Activités</a>
            </div>

        </nav>
        <header>

            <h1>Trouvez votre hébergement pour des vacances de rêve</h1>
            <p>En plein centre ville ou en pleine nature</p>

            <div >
                <i ></i>
                <input type="search" value="Marseille , France" />
                <button>Rechercher</button>
                <span
                i ></i>
                </span>
            </div>

            <div >

                <h2>Filtres</h2>

                <div >

                    <i ></i>
                    <p>Économique</p>

                </div>

                <div >
                    <i ></i>
                    <p>Familial</p>
                </div>

                <div >
                    <i ></i>
                    <p>Romantique</p>
                </div>

                <div >
                    <i ></i>
                    <p>Animaux Autorisés</p>
                </div>
            </div>

            <div >
                <i ></i>
                <p>Plus de 500 logements sont disponibles dans cette ville</p>
            </div>

        </header>
        <section >
            <div >
                <h1>Hébergements à Marseille</h1>
               

                    <div >
                        <img  src="imagesdekstop/img_1_small.jpg" alt="Auberge La Cannebière">
                        <div >
                            <h3>Auberge La Cannebière</h3>
                            <p>Nuit à partir de 25€</p>

                            <div >
                            <i ></i>
                            <i ></i>
                            <i ></i>
                            <i ></i>
                            <i ></i>
                           </div>
                        </div>
                        <!-- class=cubeDetailsHebergements -->
                    </div>
                    <!-- class=cubeHebergements -->

                    <div >
                        <img  src="imagesdekstop/img_2_small.jpg" alt="Hôtel du port">
                        <div >
                            <h3>Hôtel du port</h3>
                            <p>Nuit à partir de 52€</p>

                            <div >
                            <i ></i>
                            <i ></i>
                            <i ></i>
                            <i ></i>
                            <i ></i>
                        </div>
                        </div>
                        <!-- class=cubeDetailsHebergements -->
                    </div>
                    <!-- class=cubeHebergements-->

                    <div >
                        <img  src="imagesdekstop/img_3_small.jpg" alt="Hôtel Les mouettes">
                        <div >
                            <h3>Hôtel Les mouettes</h3>
                            <p>Nuit à partir de 25€</p>

                            <div >
                            <i ></i>
                            <i ></i>
                            <i ></i>
                            <i ></i>
                            <i ></i>
                        </div>
                        </div>
                        <!-- class=cubeDetailsHebergements -->
                    </div>
                    <!-- class=cubeHebergements -->

                
                    <div >
                        <img  src="imagesdekstop/img_4_small.jpg" alt="Hôtel de la mer">
                        <div >
                            <h3>Hôtel de la mer</h3>
                            <p>Nuit à partir de 46€</p>

                            <div >
                            <i ></i>
                            <i ></i>
                            <i ></i>
                            <i ></i>
                            <i ></i>
                        </div>
                        </div>
                        <!-- class=cubeDetailsHebergements -->
                    </div>
                    <!-- class=cubeHebergements -->

                    <div >
                        <img  src="imagesdekstop/img_5_small.jpg" alt="Auberge le Panier">
                        <div >
                            <h3>Auberge le Panier</h3>
                            <p>Nuit à partir de 23€</p>

                            <div >
                            <i ></i>
                            <i ></i>
                            <i ></i>
                            <i ></i>
                            <i ></i>
                        </div>
                        </div>
                        <!-- class=cubeDetailsHebergements -->
                    </div>
                    <!-- class=cubeHebergements flexColumnCentre -->

                    <div >
                        <img  src="imagesdekstop/img_6_small.jpg" alt="Hôtel chez Amina">
                        <div >
                            <h3>Hôtel chez Amina</h3>
                            <p>Nuit à partir de 96€</p>

                            <div >
                            <i ></i>
                            <i ></i>
                            <i ></i>
                            <i ></i>
                            <i ></i>
                        </div>
                        </div>
                        <!-- class=cubeDetailsHebergements -->
                    </div>
                    <!-- class=cubeHebergements  -->
                
                <a href="#">Afficher Plus</a>
            </div>
            <!---->

            <div >
                <div >
                    <h1>Les plus populaires</h1>
                    <i ></i>
                </div>


                <div >
                    <img  src="imagesdekstop/img_1_pop_small.jpg" alt="Hôtel Le soleil du matin">
                    <div >
                        <h3>Hôtel Le soleil du matin</h3>
                        <p>Nuit à partir de 128€</p>


                        <i ></i>
                        <i ></i>
                        <i ></i>
                        <i ></i>
                        <i ></i>

                    </div>
                    <!--class=cubeDetailsPopulaires-->
                </div>
                <!--class=cubePopulaire-->
                <div >
                    <img  src="imagesdekstop/img_2_pop_small.jpg" alt="Au coeur de l'eau Chambres d'hôtes">
                    <div >
                        <h3>Au coeur de l'eau Chambres d'hôtes</h3>
                        <p>Nuit à partir de 71€</p>

                        <i ></i>
                        <i ></i>
                        <i ></i>
                        <i ></i>
                        <i ></i>

                    </div>
                    <!--class=cubeDetailsPopulaires-->
                </div>
                <!--class=cubePopulaire -->
                <div >
                    <img  src="imagesdekstop/img_3_pop_small.jpg" alt="Au coeur de l'eau Chambres d'hôtes">
                    <div >
                        <h3>Hôtel Tout bleu et Blanc</h3>
                        <p>Nuit à partir de 68€</p>

                        <i ></i>
                        <i ></i>
                        <i ></i>
                        <i ></i>
                        <i ></i>

                    </div>
                    <!--class=cubeDetailsPopulaires-->
                </div>
                <!--class=cubePopulaire -->
            </div>
            <!-- class=blocPopulaires -->
        </section>

        <article id="activites" >
            <h6>Activités à Marseille</h6>
            <div >
                <div >
                    <img src="imagesdekstop/img_1_act_med.jpg" alt="Vieux Port">
                    <h3>Vieux Port</h3>
                </div>
                <div >
                    <img src="imagesdekstop/img_2_act_small.jpg" alt="Fort de Pomègues">
                    <h3>Fort de Pomègues</h3>
                </div>
                <div >
                    <img src="imagesdekstop/img_3_act_med.jpg" alt="îles du Frioul">
                    <h3>îles du Frioul</h3>
                </div>
                <div >
                    <img class src="imagesdekstop/img_4_act_small.jpg" alt="Parc National des Calanques">
                    <h3>Parc National des Calanques</h3>
                </div>
                <div >
                    <img src="imagesdekstop/img_5_act_small.jpg" alt="Notre-Dame-de-la-Garde">
                    <h3>Notre-Dame-de-la-Garde</h3>
                </div>
                <div >
                    <img src="imagesdekstop/img_6_act_small.jpg" alt="Parc Longchamp">
                    <h3>Parc Longchamp</h3>
                </div>
            </div>
    <!--BlocPage-->
        </article>

        <footer >

            <div >

                <h3>A propos</h3>
                <a href="#">Fonctionnement du site</a>
                <a href="#">Conditions générales de vente</a>
                <a href="#">Donneés et confidentialité</a>
            </div>
            <!-- class=tailleBlocFooter -->

            <div >
                <h3>Nos hébergements</h3>
                <a href="#">Charte qualité</a>
                <a href="#">Soumettre votre hôtel</a>

            </div>
            <!-- class=tailleBlocFooter-->

            <div >
                <h3>Assistance</h3>
                <a href="#">Centre d'aide</a>
                <a href="#">Nous contacter</a>


            </div>
            <!-- class=tailleBlocFooter-->
        </footer>
    </div>
</body>

</html>

Page link：https//www.codepudding.com/other/243495.html

Prev:How can I continue text from where div ends with bootstrap or html
Next:Why Is my "flex-wrap" property not working?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding