搜尋

首頁  >  問答  >  主體

css - div 自適應高度 自動填滿剩餘高度

固定的盒子需要絕對定位才能達到以下效果,希望有不需要絕對定位實現以下方法的大神!求指點

<!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梦2734 天前1043

全部回覆(3)我來回復

  • 巴扎黑

    巴扎黑2017-05-31 10:42:40

    問題有點模糊,如果是要求A+B等於outer的高度,可以用calc(100% - 100px);

    回覆
    0
  • PHPz

    PHPz2017-05-31 10:42:40

    浮動 固定定位

    回覆
    0
  • 迷茫

    迷茫2017-05-31 10:42:40

    你的問的不太明白啊,能說的具體點嗎?

    回覆
    0
  • 取消回覆