css - ketinggian penyesuaian div secara automatik mengisi ketinggian yang tinggal
过去多啦不再A梦
过去多啦不再A梦 2017-05-31 10:40:40
0
3
1040

Kotak tetap memerlukan kedudukan mutlak untuk mencapai kesan berikut Saya harap ada tuan yang boleh mencapai kaedah berikut tanpa kedudukan mutlak! Tolong beri saya nasihat

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    html,
    body {
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    
    .outer {
        height: 100%;
        padding: 100px 0 0;
        box-sizing: border-box;
    }
    
    .A {
        height: 100px;
        background: #BBE8F2;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    
    .B {
        height: 100%;
        background: #D9C666;
        overflow: scroll;
    }
    </style>
</head>

<body>
    <p class="outer">
        <p class="A"> 头部p </p>
        <p class="B">
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdfD</p> <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdfD</p> <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdfD</p> <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdfD</p> <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdfD</p> <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdfD</p> <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>abcabsdf</p>
            <p>sssssssssssssssssssssss</p>

         </p>
    </p>
</body>

</html>
过去多啦不再A梦
过去多啦不再A梦

membalas semua(3)
巴扎黑

Soalannya agak kabur Jika A+B dikehendaki sama dengan ketinggian luar, anda boleh menggunakan calc(100% - 100px);

.
PHPzhong

Kedudukan tetap terapung

迷茫

Saya tidak faham apa yang anda tanyakan. Bolehkah anda lebih spesifik?

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