Html 100%视口布局，带有页眉/页脚和正文中的大文本，无溢出滚动条

我需要做如下布局

基本上，无论浏览器窗口的大小如何，这都应该占据100%的视口（没有未使用的空间，没有滚动条）。 文本需要足够大，以尽可能占据正文部分的大部分，但不会溢出。所以，根本没有滚动条

文本是动态的，大约160个字符（取决于最接近的空白处）或更少。 我试过用vw、vh、vmin和vmax来表示字体大小，但这还不够。太大，文本以某些比例溢出。太小，空间太大

我使用的是Bootstrap3.3.0，我不介意使用javascript解决方案，只要它们具有良好的性能

---

有什么想法吗？

你可以使用字体大小：calc（2vw+4vmin） 这是实验性的，但基于纯CSS。只需使用变量（vw、vh、vmin和vmax）并找到最佳表达式

*，
*：之前，
*：之后{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
html，
身体{
填充：0；
保证金：0；
身高：100%；
}
身体{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-webkit flex；
显示：-ms flexbox；
显示：框；
显示器：flex；
-网络工具包盒方向：垂直；
-莫兹盒方向：垂直；
-o形盒方向：垂直；
-webkit箱线：单条；
-moz盒线：单条；
-o形盒线：单；
-webkit flex flow：列nowrap；
-ms-flex-flow：列nowrap；
柔性流动：柱状nowrap；
背景色：#333；
}
标题{
高度：60px；
背景色：#f2f4f3；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-webkit flex；
显示：-ms flexbox；
显示：框；
显示器：flex；
-webkit盒包：中心；
-莫兹盒包装：中心；
-o盒组件：中心；
-ms-flex-pack:center；
-webkit内容：中心；
证明内容：中心；
-webkit框对齐：居中；
-moz框对齐：居中；
-o形盒对齐：居中；
-ms-flex-align：居中；
-webkit对齐项目：居中；
对齐项目：居中；
}
主要{
-webkit-box-flex:1；
-moz-box-flex:1；
-o-box-flex:1；
箱型柔性：1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
身高：100%；
背景色：#a9927d；
字体大小：calc（2vw+4vmin）；
溢出：隐藏；
}
页脚{
高度：60px；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-webkit flex；
显示：-ms flexbox；
显示：框；
显示器：flex；
-webkit盒包：中心；
-莫兹盒包装：中心；
-o盒组件：中心；
-ms-flex-pack:center；
-webkit内容：中心；
证明内容：中心；
-webkit框对齐：居中；
-moz框对齐：居中；
-o形盒对齐：居中；
-ms-flex-align：居中；
-webkit对齐项目：居中；
对齐项目：居中；
背景色：#5e503f；
}

标题
Lorem ipsum dolor sit amet，奉献精英。公元前20世纪初，我的名字叫《自然之门》，它的名字叫《自然之门》，名字叫《自然之门》，名字叫《自然之门》，名字叫《自然之门》！
页脚

以像素为单位的精度将始终处于关闭状态，因为字母的像素宽度不相等

为字符设置大字体，使其在内容区域内溢出。获取内容区域内部高度，获取滚动高度（由溢出文本设置），然后循环减去1个像素，直到滚动高度不大于内容区域的内部高度

在CSS中，你可以有任何字体大小，只要它是一个大的大小，所以字母溢出。将该大小与循环计数器匹配

这适用于任意数量的字符，有时您会注意到底部有一个间隙。这是因为溢出和最小字体大小之间存在1px的差异，以适合内容区域。这意味着，如果看到间距时将字体增加1或2个像素，则会出现溢出

演示

Jquery/JS

for (i = 0; i < 300; i++) {
    var size = $(".content").css('font-size');
    size = size.replace('px', '');
    size = parseInt(size) - 1
    if ($('.content')[0].scrollHeight > $('.content').innerHeight()) {
        $(".content").css("font-size", size + "px")
    }
}

$(window).resize(function () {
    $(".content").css("font-size", "300px")
    for (i = 0; i < 300; i++) {
        var size = $(".content").css('font-size');
        size = size.replace('px', '');
        size = parseInt(size) - 1
        if ($('.content')[0].scrollHeight > $('.content').innerHeight()) {
            $(".content").css("font-size", size + "px")
        }
    }
})

（i=0；i<300；i++）的

{
变量大小=$（“.content”）.css（'font-size'）；
尺寸=尺寸。替换（'px'，''）；
size=parseInt（size）-1
如果（$（'.content'）[0].scrollHeight>$（'.content'）.innerHeight（））{
$（“.content”）.css（“字体大小”，大小+“px”）
}
}
$（窗口）。调整大小（函数（）{
$（“.content”）.css（“字体大小”，“300px”）
对于（i=0；i<300；i++）{
变量大小=$（“.content”）.css（'font-size'）；
尺寸=尺寸。替换（'px'，''）；
size=parseInt（size）-1
如果（$（'.content'）[0].scrollHeight>$（'.content'）.innerHeight（））{
$（“.content”）.css（“字体大小”，大小+“px”）
}
}
})

如果您想要的是演示，请在此处尝试演示--。我已经尝试过jSlabify，但它并不完全是我想要的。