CSS: Сделайте один центральный div высота расширяется, чтобы заполнить то, что осталось в контейнере FIXED-HEIGHT

Извините, ребята, это еще один вопрос о высоте CSS "100%" (sortof) ...

У меня есть такой макет:

 ---------------.   
|Containing div |   Containing div's height is FIXED
| .-----------. |     (say 400px for simplicity)
| |Inner div1 | |   Inner div1 has height fixed (say 50px)
| '-----------' |   Inner div3 has static-but-unknown content, 
| .-----------. |     height not known at render time
| |Inner      | |   Inner Variable Div should expand to the rest
| |Variable   | |     of the space - i.e. I want to eliminate
| |Div        | |     the "blank space"
| '-----------' |
| .-----------. |
| |Inner div3 | |
| |with fixed | |
| |usercontent| |
| '-----------' |
|  blank space  |
'---------------'

Это: один контейнер Div с ФИКСИРОВАННОЙ ВЫСОТОЙ ( скажем, 400 пикселей). Внутри него несколько разделов, уложенных вертикально: div1, Variable Div, div3. По крайней мере, один из них (div3) имеет статическое, но неизвестное содержимое, поэтому я не могу просто наложить вычисленную высоту пикселя на все. ради аргумента, что div1 + div3 ПОДХОДИТ в контейнер Div.

Я хочу, чтобы переменный Div расширялся, чтобы заполнить остальную часть высоты в 400px контейнера Div. Но я не могу указать его высоту как 100%, потому что это игнорирует срез, который нужен другим внутренним div, и переполняет контейнер Div.

Это отличается от большинства вопросов с тегами CSS-высоты, но CSS div height победил ' t expand и Фиксированная высота родительского контейнера, дочерний элемент для расширения / ограничения родительского контейнера может быть связан.

Мне нужно решение на чистом CSS, если это вообще возможно. Я согласен, что он работает только в FF / Webkit / очень свежем IE.

6
задан Community 23 May 2017 в 12:04
поделиться