css - div 自适应高度 自动填充剩余高度
过去多啦不再A梦
过去多啦不再A梦 2017-05-31 10:40:40
0
3
1042

固定的盒子需要绝对定位才能实现以下效果,希望有不需要绝对定位实现以下方法的大神!求指点

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

全部回复(3)
巴扎黑

问题有点模糊,如果是要求A+B等于outer的高度,可以用calc(100% - 100px);

PHPzhong

浮动 固定定位

迷茫

你的问的不太明白啊,能说的具体点吗?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板