recherche

Maison  >  Questions et réponses  >  le corps du texte

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.

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

PHP中文网PHP中文网2807 Il y a quelques jours1830

répondre à tous(5)je répondrai

  • 漂亮男人

    漂亮男人2017-06-13 09:25:37

    .box {
    position: absolute;
    top: 0;
    left: 0;
}

/* 或者 */
.wrapper {
    display: flex;
    align-items: flex-end;
}

    répondre
    0
  • 三叔

    三叔2017-06-13 09:25:37

    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.

    répondre
    0
  • ringa_lee

    ringa_lee2017-06-13 09:25:37

    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

    répondre
    0
  • 女神的闺蜜爱上我

    女神的闺蜜爱上我2017-06-13 09:25:37

    Hauteur fixe + marge négative

    répondre
    0
  • 阿神

    阿神2017-06-13 09:25:37

    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

    répondre
    0
  • Annulerrépondre