1

Тема: CSS: height: 100% - height of previous sibling

Є контейнер, всередині якого два контейнери. Верхній контейнер займає потрібну йому висоту (там буде щось на зразок панелі інструментів), а нижній мав би займати все решта (робоча область), але чомусь не хоче.

height: 100% - вилазить за межі контейнера. margin: 0; - не змінює розмір взагалі. Хтось може щось підказати?

jsfiddle

2

Re: CSS: height: 100% - height of previous sibling

жс можна?

3

Re: CSS: height: 100% - height of previous sibling

жс це JavaScript? Неа. Відповідь така:

#top {
    padding: 0; 
    float: left;
    width: 100%;
}
#main {
    padding: 0;
    height:100%;
}

4 Востаннє редагувалося Ярослав (10.07.2014 17:35:31)

Re: CSS: height: 100% - height of previous sibling

Якраз сьогодні читав, для того, щоб застосовувалась властивість height із відсотками, треба, щоб висота кожного із батьківських елементів теж була виражена.
http://stackoverflow.com/questions/1738 … ot-working

Не одразу побачив Ваш приклад :)

5

Re: CSS: height: 100% - height of previous sibling

bunyk написав:

жс це JavaScript? Неа. Відповідь така:

#top {
    padding: 0; 
    float: left;
    width: 100%;
}
#main {
    padding: 0;
    height:100%;
}

Можна захардкодити потрібне співвідношення по висоті. Здається так це виглядало б

html {
    height: 100%; 
}

#top {
    width: 100%;
    height: 40%
}
#main {
    padding: 0;
    height:60%;
}

6

Re: CSS: height: 100% - height of previous sibling

Так в тому то й проблема була, що висота верхньої панелі - сума висот контролів які туди влізають, а не 40%.