Два div внутри master div, один с фиксированным размером

Question

Два div внутри master div, один с фиксированным размером

0

У меня есть два div внутри master div. Дело в том, что я хочу иметь возможность установить размер главного div, а для div внутри внутри я хочу иметь возможность установить верхний div на фиксированный размер, а div под этим должен заполнить остальную часть области мастера div.

Я приведу здесь пример кода, но это не сработает, поскольку нижний div использует%, чтобы заполнить все остальное независимо от того, какой размер имеет главный div.

Вот пример кода

<html lang="en"><head><style>

    .outer {
        width: 400px;
        height: 400px;  
        background-color:#0000FF;
    }

    .innerTop {
        width: 100%;
        height: 50px;   
        background-color:#008800;
    }

    .innerBottom {
        width: 400px;
        height: 100%;   
        background-color:#B6E6FB;
    }


</style>

</head>
<body>

    <div class="outer">
        <div class="innerTop">
            Upper
        </div>
        <div class="innerBottom">
            Lower
        </div>
    </div>      

</body></html>

Jonas Lindahl 03 янв. 2014, в 21:17

Источник

0

я не понимаю, он делает именно то, что должен, вы можете объяснить больше?
jmore009 03 янв. 2014, в 20:03
0

попробуйте использовать float:left во innertop и innerbottom
jcho360 03 янв. 2014, в 20:03

Теги:

html

css

css3

2 ответа

0

Используйте абсолютное позиционирование, чтобы расположить верхний div, а затем примените соответствующий край к нижнему div, чтобы они не перекрывались.

Также убедитесь, что вы применяете box-sizing: border-box; для всех элементов, поэтому вычисления выполняются правильно для этого макета.

* { box-sizing: border-box }

.outer {
    width: 400px;
    height: 400px;  
    background-color:#0000FF;
}

.innerTop {
    width: 100%;
    height: 50px;   
    background-color:#008800;
    position:absolute;
    top:0;
}

.innerBottom {
    width: 400px;
    margin-top:50px;
    height: 100%;   
    background-color:#B6E6FB;
}

http://jsfiddle.net/qDgS8/

Mister Epic 03 янв. 2014, в 17:55

Ещё вопросы

я не понимаю, он делает именно то, что должен, вы можете объяснить больше?
попробуйте использовать float:left во innertop и innerbottom

Cilan · Accepted Answer · 2014-01-03T17-24-00.000Z

Изменение height: 100%

height: calc(100% - 50px);

на innerBottom.

Это вычитает 50 пикселей в высоту, потому что innerTop составляет 50 пикселей.

Если вас беспокоит совместимость с браузером, вы можете использовать:

height: -moz-calc(100% - 50px);
height: -o-calc(100% - 50px);
height: expression(100% - 50px);
height: calc(100% - 50px);

DEMO

Вот дополнительная информация о браузерной поддержке calc () caniuse.com/calc
Отлично! знал, что было довольно простое решение для этого.