手機版footer拒絕貼底，只有html和css-有解無憂

[手機版][1][1]：https://i.stack.imgur.com/vC88y.jpg

[桌面版][1][2]：https://i.stack.imgur.com/BjuV2.jpg

桌面版和平板電腦都很好，但是一旦我轉到移動版，我的頁腳似乎就卡在了“活動塊”中

我試圖在頁腳上加高，他移動到底部，但回應者不接受它，有人不得不處理類似的事情嗎？感謝您的回答，如果需要，我可以向您發送漏洞代碼。

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

/*
 * 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 class="blocPage">
        <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 class="Recherche">
                <i class="fas fa-map-marker-alt"></i>
                <input type="search" value="Marseille , France" />
                <button>Rechercher</button>
                <span
                i class="fas fa-search"></i>
                </span>
            </div>

            <div class="filtres">

                <h2>Filtres</h2>

                <div class="Filtre">

                    <i class="fas fa-money-bill-wave"></i>
                    <p>économique</p>

                </div>

                <div class="Filtre">
                    <i class="fas fa-child"></i>
                    <p>Familial</p>
                </div>

                <div class="Filtre">
                    <i class="fas fa-heart"></i>
                    <p>Romantique</p>
                </div>

                <div class="Filtre">
                    <i class="fas fa-dog"></i>
                    <p>Animaux Autorisés</p>
                </div>
            </div>

            <div class="info">
                <i class="fas fa-info fa-xs "></i>
                <p>Plus de 500 logements sont disponibles dans cette ville</p>
            </div>

        </header>
        <section class="hebergements">
            <div class="blocHebergements">
                <h1>Hébergements à Marseille</h1>
               

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

                            <div class="etoiletablette">
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star desactive"></i>
                           </div>
                        </div>
                        <!-- class=cubeDetailsHebergements -->
                    </div>
                    <!-- class=cubeHebergements -->

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

                            <div class="etoiletablette">
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                        </div>
                        </div>
                        <!-- class=cubeDetailsHebergements -->
                    </div>
                    <!-- class=cubeHebergements-->

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

                            <div class="etoiletablette">
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star desactive"></i>
                        </div>
                        </div>
                        <!-- class=cubeDetailsHebergements -->
                    </div>
                    <!-- class=cubeHebergements -->

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

                            <div class="etoiletablette">
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star desactive"></i>
                            <i class="fas fa-star desactive"></i>
                        </div>
                        </div>
                        <!-- class=cubeDetailsHebergements -->
                    </div>
                    <!-- class=cubeHebergements -->

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

                            <div class="etoiletablette">
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star desactive"></i>
                        </div>
                        </div>
                        <!-- class=cubeDetailsHebergements -->
                    </div>
                    <!-- class=cubeHebergements flexColumnCentre -->

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

                            <div class="etoiletablette">
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                            <i class="fas fa-star active"></i>
                        </div>
                        </div>
                        <!-- class=cubeDetailsHebergements -->
                    </div>
                    <!-- class=cubeHebergements  -->
                
                <a href="#">Afficher Plus</a>
            </div>
            <!---->

            <div class="blocPopulaires">
                <div class="blocchart">
                    <h1>Les plus populaires</h1>
                    <i class="fas fa-chart-line fa-2x"></i>
                </div>


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


                        <i class="fas fa-star active"></i>
                        <i class="fas fa-star active"></i>
                        <i class="fas fa-star active"></i>
                        <i class="fas fa-star active"></i>
                        <i class="fas fa-star active"></i>

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

                        <i class="fas fa-star active"></i>
                        <i class="fas fa-star active"></i>
                        <i class="fas fa-star active"></i>
                        <i class="fas fa-star active"></i>
                        <i class="fas fa-star desactive"></i>

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

                        <i class="fas fa-star active"></i>
                        <i class="fas fa-star active"></i>
                        <i class="fas fa-star active"></i>
                        <i class="fas fa-star active"></i>
                        <i class="fas fa-star desactive"></i>

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

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

        <footer class="CubeFoot">

            <div class="tailleBlocFooter">

                <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 class="tailleBlocFooter">
                <h3>Nos hébergements</h3>
                <a href="#">Charte qualité</a>
                <a href="#">Soumettre votre h?tel</a>

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

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


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

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395748.html

標籤：html css 页脚

上一篇：如何從div以bootstrap或html結尾的位置繼續文本

下一篇：我需要使用.data()方法獲取資料