Как реализовать height: calc(100% — 40px) в резиновом блоке?

Question

[TANK_IST]

Вот пример: jsbin.com/teyalido/2/edit
Как реализовать height: calc(100% - 40px) если родительский блок без фиксированной высоты?

Answer 1

[Юрий Лобанов]

Никак, вот Вам сухой остаток, без всех Ваших нагромождений, которые не имеют к вопросу отношения:
jsbin.com/siretudu/1/edit
Как можно рассчитать значение 100% и присвоить блоку value, если оно определяется самим блоком value. Говоря простым языком - получается замкнутый круг.
Для этого, как Вам уже написали, существует padding и margin. Вот один из вариантов:
jsbin.com/xikokuru/1/edit

Comments

[TANK_IST]

value у меня больше чем wrap

[Юрий Лобанов]

@TANK_IST Что? В вашем примере общий контейнер, div без класса по высоте равен div.value, и соответственно шире, так как занимает 100% экрана.
А если это то, чего Вы хотите добиться, то почему вычитаете 40px? Кроме того, такая практика, когда дочерний элемент больше родительского редко оправдана, чаще всего это из области говнокода.

[TANK_IST]

это нужно для анимации, тот блок что внизу высотой 40px и при нажатии на главный div все блоки внутри получают top: -40. Будет чтото типа контекстного меню

[Юрий Лобанов]

@TANK_IST примерно понятно, возможно это как раз тот случай, когда дочерний элемент может быть больше родителя, понятно теперь, почему было overflow:hidden. В следующий раз лучше задавайте вопрос целиком, calc - новая возможность, а подобные Вашему примеру реализовывали и без него раньше.

Answer 2

[Александр Борисович]

Вы там наворотили чегото). Что вы хотите сделать конкретно?
Если всегда нужно отнимать 40px, почему
margin: -40px 0 0 0;
не катит?

Пример описывал тут если с анимацией.
toster.ru/answer?answer_id=272884#answers_list

Answer 3

[Lisonok]

По идее, никак, может и ошибаюсь
Задайте блоку высоту 100% и padding-bottom 40px
Вложите в него еще один div, он как раз будет 100% - 40px

Answer 4

[Никита Рябин]

Используйте пустые блоки с свойствами css, задаете ширину и высоту и готово.