如何使标题高度相对于（标签）内容高度？

Question

很难解释我需要什么，所以我添加了一个图像，使事情更清晰：

示例：请参阅下面的图片

我在一个页面上构建一个带标签内容的网站。我希望我的标题和内容高度越来越大，当有更多或更少的内容，总页面高度变得越来越大，然后100％当内容小于最大内容大小我希望标题变得更大/动画滑下来。

如何使标题和内容相对于彼此和标签内容大小调整大小？

请参阅上图以获得更清晰的解释。

Answer 1

在@ vlrprbttst小提琴的基础上，这或多或少是您所需要的：

working demo

的CSS

:root, body {
    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
}
.cont {
    background:black;
}
.wrap { height:100%;}
#header {
    height:75%;
    background:red;
}
#content {
    height:25%;
    padding:0;
    margin:0;
    background:tan;
}
#tabbed.dynamic-height {
    background:violet;
    max-height:80%;    
}

的Javascript

$(function() {
    $(window).resize(setHeights);
 setHeights()   
});

  function setHeights() {
 $(".wrap").height($(window).height()-$("#tabbed").height()); 
}