cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Cara menggunakan css untuk sentiasa membetulkan kotak kecil ke bahagian bawah kotak besar, dan ketinggian kotak besar adalah 100%, sila beri saya nasihat.

![Memuat naik gambar...]

PHP中文网PHP中文网2724 hari yang lalu1778

membalas semua(5)saya akan balas

  • 漂亮男人

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

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

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

    balas
    0
  • 三叔

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

    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.

    balas
    0
  • ringa_lee

    ringa_lee2017-06-13 09:25:37

    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

    balas
    0
  • 女神的闺蜜爱上我

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

    Ketinggian tetap + margin negatif

    balas
    0
  • 阿神

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

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

    balas
    0
  • Batalbalas