简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
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
1752

![Memuat naik gambar...]

PHP中文网
PHP中文网

认证高级PHP讲师

membalas semua(5)
漂亮男人
漂亮男人2017-06-13 09:25:37 Tingkat 5 
.box {
    position: absolute;
    top: 0;
    left: 0;
}

/* 或者 */
.wrapper {
    display: flex;
    align-items: flex-end;
}
Suka +0
Tambah Balasan
三叔
三叔2017-06-13 09:25:37 Tingkat 4

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.

Suka +0
Tambah Balasan
左手右手慢动作
左手右手慢动作2017-06-13 09:25:37 Tingkat 3

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

Suka +0
Tambah Balasan
女神的闺蜜爱上我
女神的闺蜜爱上我2017-06-13 09:25:37 Tingkat 2

Ketinggian tetap + margin negatif

Suka +0
Tambah Balasan
阿神
阿神2017-06-13 09:25:37 Tingkat 1

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

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！