Css 引导可滚动到车身高度的div 100%

我想使身体固定与100%的高度和身体内的主要div滚动，并有一些周围的空白。大概是这样的：

---

你真的不需要引导

如果您无法运行代码段，这是CodePen上的笔：

身体{ 保证金：0； } .满{ 位置：绝对位置； 宽度：100%； 身高：100%； 背景色：红色； 溢出：隐藏； } .里面{ 位置：相对位置； /*一点利润*/ 顶部：50px； 左：50px； /*计算宽度，如果不是，则计算奇怪的效果*/ 宽度：calc100%-50px*2； 高度：calc100%-50px*2； /*50px*2，因为50px刚好足以使.inside div的宽度和高度不从屏幕上掉下来*/ /*让它像你的形象*/ 背景颜色：蓝色； 溢出：自动； }

---

向我展示您迄今为止尝试过的代码？？我找到了使用jquery的解决方案；我得到了身体高度的加载和调整减去100px的填充。无论如何谢谢你使用css计算比jquery简单！学习它，使你的代码更干净。如果您使用jquery，那么这段代码必须运行onload和onresize，这要困难得多。您想在内部块中添加一些文本吗？当滚动条出现时，代码片段会更清晰。我想我不应该这样做，因为你必须删除lorem ipsum文本才能使用代码。但是，如果这是重要的，请随意编辑我的答案。

<div class="main" style="background-color:red; height:100vh; float:left; width:100%;>

    <div class="wrapper" style="width:1170px;margin:0 auto">
    <div class="main-text" style="float:left; width:100%; background-color:blue;">

</div>

<div>

</div>