javascript - Cara menggunakan css untuk sentiasa membetulkan kotak kecil ke bahagian bawah kotak besar, dan ketinggian kotak besar adalah 100%, sila beri saya nasihat.
PHP中文网
PHP中文网 2017-06-13 09:23:37
0
5
1796

![Memuat naik gambar...]

PHP中文网
PHP中文网

认证高级PHP讲师

membalas semua(5)
漂亮男人
.box {
    position: absolute;
    top: 0;
    left: 0;
}

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

Mari kita lihat jika saya meneka apa yang anda maksudkan salah

<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>

Di sini anda boleh membuat ketinggian pembalut dan kandungan sama, iaitu kedudukan adalah relatif, gunakan float di sini dalam penyegaran, dan kemudian tetapkan lebar dan ketinggian. Oleh kerana muat semula telah diasingkan daripada aliran dokumen, ia tidak akan menjejaskan ketinggian pembalut dan bekas ditetapkan untuk melimpah: tersembunyi. Apabila anda menariknya terlalu jauh, penyegaran akan muncul secara semula jadi. Saya tidak tahu sama ada ini akan berkesan.

左手右手慢动作

Perkara yang paling tidak berotak ialah menggunakan position:absolute untuk mencapai:

<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>

*Perlu diingatkan bahawa kedudukan kotak besar juga mesti ditetapkan Hanya kedudukan kotak kecil akan tahu dengan siapa jika nod induk tidak dapat mencari kedudukan, ia akan terus mencari ke atas sehingga ia menemui nod DOM dengan kedudukan

女神的闺蜜爱上我

Ketinggian tetap + margin negatif

阿神

P besar diletakkan secara mutlak, p kecil diletakkan secara relatif, dan bahagian bawah adalah 0. Bukankah ok

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan