简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Comment utiliser CSS pour toujours fixer une petite boîte au bas d'une grande boîte et que la hauteur de la grande boîte est de 100%, donnez-moi quelques conseils.
PHP中文网
PHP中文网 2017-06-13 09:23:37
0
5
1754

 ![Téléchargement de la photo...]

PHP中文网
PHP中文网

认证高级PHP讲师

répondre à tous(5)
漂亮男人
漂亮男人2017-06-13 09:25:37 5 plancher 
.box {
    position: absolute;
    top: 0;
    left: 0;
}

/* 或者 */
.wrapper {
    display: flex;
    align-items: flex-end;
}
Comme +0
Ajouter une réponse
三叔
三叔2017-06-13 09:25:37 4 plancher

Voyons si j’ai mal compris ce que vous vouliez dire ; 

<p class="container"> //大容器100%
    <p class="wrapper">
        <p class="content"></p>//内容区域
        <p class="refresh"></p> //小盒子显示的上拉状态
    </p> //滚动区域
    <p class="scrollBox">
        <p class="bar"></p>
    </p>//我是滚动条
</p>

<style>
.container{
    position:relative;
    height:100%;
    overflow:hidden;
    /*.....*/
}

.wrapper{
    position:relative;
    height:auto;
    /*.....*/
}

.content{
    position:relative;
    height:auto;
    /*....*/
}

.refresh{
    position:relative;
    float : left;
    width:100%;
    height:40px;
    /*......*/
}

.scrollBox{
    position:absolute;
    height:100%;
    right:0px;
    top:0px;
    /*因为scrollBox的父元素是container，而且改变的是content，所以这里不会发生改变*/
}

.bar{
    position:relative;
    height : /*通过js计算并更新*/;
}
</style>

Ici, vous pouvez rendre la hauteur du wrapper et du contenu identique, c'est-à-dire que la position est relative, utilisez float ici lors de l'actualisation, puis définissez la largeur et la hauteur. Étant donné que l'actualisation a été séparée du flux de documents, elle n'affectera pas la hauteur du wrapper et le conteneur est défini sur overflow: caché. Lorsque vous le tirez trop loin, l'actualisation apparaîtra naturellement. Je ne sais pas si cela fonctionnera.

Comme +0
Ajouter une réponse
左手右手慢动作
左手右手慢动作2017-06-13 09:25:37 3 plancher

La chose la plus stupide est d'utiliser position:absolute pour réaliser : 

<body style='margin: 0;font-size: 36px;'>
    <p id='bigbox' style='position: absolute;width: 100%;height: 100%;background-color: rgba(0,0,0,0.2);'>
        <span>大盒子</span>
        <p id='smallbox' style='position: absolute;width: 500px;height: 500px;background-color: red;bottom: 0;'>
            <span>小盒子</span>
        </p>
    </p>
</body>

*Il est à noter que la position de la grande boîte doit également être définie. Seule la position de la petite boîte saura avec qui comparer. Si le nœud parent ne trouve pas la position, il continuera à chercher vers le haut jusqu'à ce qu'il trouve. le nœud DOM avec position

Comme +0
Ajouter une réponse
女神的闺蜜爱上我
女神的闺蜜爱上我2017-06-13 09:25:37 2 plancher

Hauteur fixe + marge négative

Comme +0
Ajouter une réponse
阿神
阿神2017-06-13 09:25:37 1 plancher

Un grand p est positionné de manière absolue, un petit p est positionné de manière relative et le bas est 0. N'est-ce pas ok

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！