Comment utiliser la disposition autocollant-pied de page en CSS-tutoriel CSS-php.cn

Comment utiliser la disposition autocollant-pied de page en CSS

php中世界最好的语言

Libérer： 2018-03-21 09:53:05

original

2279 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser la disposition autocollant-pied de page en CSS, et quelles sont les précautions lors de l'utilisation de la disposition autocollant-pied de page en CSS Voici un cas pratique, prenons un. regarder.

Dans la conception Web, la conception de pieds de page collants est l'un des effets les plus anciens et les plus courants que la plupart des gens ont expérimentés à un moment ou à un autre. Cela peut se résumer ainsi : si le contenu de la page n'est pas assez long, le bloc de pied de page est collé en bas de la fenêtre ; si le contenu est suffisamment long, le bloc de pied de page est poussé vers le bas par le contenu. Non seulement cet effet est omniprésent et populaire, mais il est également d’une simplicité trompeuse à réaliser. Mais sa mise en œuvre a en réalité pris plus de temps que prévu. De plus, les solutions CSS 2.1 fixent presque toujours une hauteur fixe pour le pied de page. C’est très fragile et rarement réalisable. En fait, il est trop compliqué d'obtenir cet effet, et cela nécessite également l'ajout de balises spécifiques et de certaines méthodes de Hack. Il y a certaines limitations dans CSS2.1, mais en utilisant du CSS moderne, nous pouvons améliorer cet effet, alors comment le faire ?

1. Le niveau d'imbrication n'est pas profond et peut être directement hérité de la largeur du corps : 100 % ; profond et ne peut pas être

// html
<body>
    <p id="sticker">
        <p class="sticker-con">我是内容</p>
    </p>
    <p class="footer">我是脚</p>
</body>

Copier après la connexion

La première méthode pour hériter directement du pourcentage de hauteur du supérieur : créer un emballage pour le pied de page d'autocollant requis

// css
html,body{
    width:100%;
    height:100%;
}
#sticker{
    width:100%;
    min-height:100%;
}
.sticker-con{
    padding-bottom:40px;    // 40px 为 footer 本身高度
}
.footer{
    margin-top:-40px;  // 40px 为 footer 本身高度
}

Copier après la connexion

3. être obtenu en pourcentage, peut également être obtenu via js

   <body>
        <p id="wrapper">
            <p id="sticker">
                <p class="sticker-con">我是内容</p>
            </p>
            <p class="footer">我是脚</p>
        </p>
    </body>

Copier après la connexion

    .wrapper{
        position:fixed;  // 这样 wrapper 就可以直接从 html,body 继承 百分比高度了
        overflow:auto;   // 当高度超过 100% ;时产生滚动条
        width:100%;
        height:100%;     // 继承自 body
    }
    // wrapper 内部包裹的结构，就如上所示了，css样式也一样

Copier après la connexion

4. Disposition flexible puissante flex-direction:column

enveloppera le conteneur display:flex-direction:column

    //css样式同第一种， 只是 sticker 的 min-height 用css获取
    <body>
        <p id="sticker">
            <p class="sticker-con">我是内容</p>
        </p>
        <p class="footer">我是脚</p>
    </body>
    var sticker = document.querySelector('#sticker');
    var h = document.body.clientHeight;
    sticker.style.minHeight = h - 44 + 'px';
    //这种方式也可应对一些特殊情况，比如有头部导航栏的情况，可以灵活的处理 min-height:

Copier après la connexion

sticker : flex:1; Occupe l'espace restant sauf le pied de page

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à. d'autres articles connexes sur le site PHP chinois !

Lecture recommandée :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>sticker footer</title>
</head>
<style>
    html,body{
        width: 100%;
        height: 100%;
        background-color: #ccc;
        margin:0;
        padding: 0;
        
    }
    header{
        height:44px;
        width: 100%;
        text-align: center;
        line-height: 44px;
    }
    #wrapper{
        display: flex;
        flex-direction: column;
        width: 100%;
        /*height: 100%;*/
    }
    #sticker{
        background-color: red;
        flex: 1;
    }
    #sticker .sticker-con{
        padding-bottom: 40px;
    }
    .footer{
        background-color: green;
        height: 40px;
    }
</style>    
<body>
    <header>我是头部</header>
    <p id="wrapper">
        <p id="sticker">
            <p class="sticker-con">我是内容</p>
        </p>
        <p class="footer">我是脚</p>
    </p>
    
</body>
<script>
    var wrapper = document.querySelector('#wrapper');
    var h = document.body.clientHeight;
    wrapper.style.minHeight = h - 44 + 'px';   // 减去头部导航栏高度
</script>
</html>

Copier après la connexion

Css pur pour obtenir un effet 3D sur un mur de photos

Css pour dessiner un motif d'éventail

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!