Второй div внутри статического контейнера div занимает оставшуюся высоту ниже названия динамической высоты

Question

У меня есть div с двумя div внутри (один заголовок и один - это контент). Высота контейнера div должна быть одинаковой, а высота заголовка заголовка содержит текст, который устанавливается в единицах vw, поэтому количество строк текста будет меняться в зависимости от экрана пользователя в дополнение к высоте div. Я хочу, чтобы содержимое div заполнило оставшуюся высоту в контейнере, не расширив его. Как мне это сделать?

http://jsfiddle.net/3sjrv5rz/

div.container{ 
 
    height:200px; 
 
    width:200px; 
 
} 
 

 
div.title{ 
 
    font-size:4vw; 
 
} 
 

 
div.content{ 
 
    
 
}

<div class="container"> 
 
    <div class="title">This is my title and it may be on multiple lines with different size screens</div> 
 
    <div class="content"> 
 
     This is my content and will contain a Google Visualization graph. 
 
    </div> 
 
</div>

Answer 1

После немного больше мысли, и благодаря Janx от комментариев Венесуэлы, я решил использовать яваскрипт решения. Эта функция работает, чтобы изменить размер содержимого div на любое количество пикселей. Я прикрепляю это к window.onresize, и вещь правильно изменяется!

function resizeTitles(){ 
 
\t //1) Check the size of the titles 
 
\t //2) Check the size of the container div 
 
\t //3) Get remaining pixel height 
 
\t //4) Assign height to the flex div 
 
\t var titleHeight = document.getElementById("wind-title").clientHeight; 
 
\t var containerHeight = document.getElementById("wind-container").clientHeight; 
 
\t var remainingPixels = (containerHeight - titleHeight).toString(); 
 
\t document.getElementById("wind-wrapper").style.height = remainingPixels.concat("px"); 
 
}

Answer 2

Вы можете использовать overflow: scroll для этого.

http://jsfiddle.net/x0cLa1Lu/