1 Тема від bunyk

  • bunyk
  • Replace Team
  • Поза форумом
  • Звідки: Франик
  • Дата реєстрації: 24.07.2012
  • Повідомлень: 959
    • Репутація: 751

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

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

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

jsfiddle

bunyk вебсайт

2 Відповідь від Singularity

  • Дата реєстрації: 29.07.2013
  • Повідомлень: 673
    • Репутація: 166

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

жс можна?

3 Відповідь від bunyk

  • bunyk
  • Replace Team
  • Поза форумом
  • Звідки: Франик
  • Дата реєстрації: 24.07.2012
  • Повідомлень: 959
    • Репутація: 751

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

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

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

bunyk вебсайт

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

  • Ярослав
  • Гість

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

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

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

5 Відповідь від taras_kotilok

  • Звідки: Львів
  • Дата реєстрації: 21.07.2014
  • Повідомлень: 12
    • Репутація: 9

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 Відповідь від bunyk

  • bunyk
  • Replace Team
  • Поза форумом
  • Звідки: Франик
  • Дата реєстрації: 24.07.2012
  • Повідомлень: 959
    • Репутація: 751

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

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

bunyk вебсайт