How to stretch div height to fill parent div - CSS

后端 未结 7 1431
佛祖请我去吃肉
佛祖请我去吃肉 2020-12-02 10:05

I have a page with divs like below

7条回答
  •  臣服心动
    2020-12-02 10:44

    http://jsfiddle.net/QWDxr/1/

    Use the "min-height" property
    Be wary of paddings, margins and borders :)

    html, body {
        margin: 0;
        padding: 0;
        border: 0;
    }
    #B, #C, #D {
        position: absolute;
    }
    #A{
        top: 0;
        width: 100%;
        height: 35px;
        background-color: #99CC00;
    }
    #B {
        top: 35px;
        width: 200px;
        bottom: 35px;
        background-color: #999999;
        z-index:100;
    }
    #B2 {
        min-height: 100%;
        height: 100%;
        margin-top: -35px;
        bottom: 0;
        background-color: red;
        width: 200px;
        overflow: scroll;
    }
    #B1 {
        height: 35px;
        width: 35px;
        margin-left: 200px;
        background-color: #CC0066;
    }
    #C {
        top: 35px;
        left: 200px;
        right: 0;
        bottom: 35px;
        background-color: #CCCCCC;
    }
    #D {
        bottom: 0;
        width: 100%;
        height: 35px;
        background-color: #3399FF;
    }
    

提交回复
热议问题