Html 基于形状的响应式布局？

我正在为一个网站做一个小设计，它的主要内容是在一个大约80%网站宽度的正方形中，然后是一个页眉、页脚和两个边栏，通过线条发出信号。我的页眉、页脚、行和内容都可以正常工作，而且它们（大部分）在调整大小时都保持在正确的位置。但是，我不能在我的生活中找出如何使中心的正方形继续填充屏幕中间的部分（没有重叠，或者有滚动条）< /P> 我在下面附上了我的square的代码和一些我正在尝试做的事情以及当前发生的事情的截图。除了我的innercontent div之外，侧面没有div，上面和下面都有页眉和页脚div

*更新：按要求添加代码。我相信这就是我在截图中提供的示例中使用的全部内容，而不是通过一些JS生成的行。我在这里也加入了重要的css，因此我可以链接到我的JS来处理这一切：

/*===================
初始样式
=================== */
html{
颜色：#fff；
字号：1em；
背景#3f51b5；
线高：1.4；
动画：淡入淡出5s
}
：-moz选择{
背景:#6534ff ;；
文本阴影：无；
}
：：选择{
背景#3f51b5；
文本阴影：无；
}
人力资源{
显示：块；
高度：1px；
边界：0；
边框顶部：1px实心#ccc；
利润率：1米0；
填充：0；
}
音频
帆布，
iframe，
img，
svg，
录像带{
垂直对齐：中间对齐；
}
字段集{
边界：0；
保证金：0；
填充：0；
}
文本区{
调整大小：垂直；
}
.浏览器升级{
边际：0.2米0；
背景：#ccc；
颜色：#000；
填充：0.2米0；
}
身体{
字体：16px/26px Helvetica，Helvetica Neue，Arial；
}
h1，
h2，
h3，
h4{
颜色：#fff；
字体系列：“蒙特塞拉特”，无衬线；
线高：正常；
}
h1{
字体大小：25px；
字母间距：3.1；
}
氢{
字体大小：14px；
字号：500；
文本对齐：对齐；
}
h3{
字体系列：“空格Mono”，monospace；
字体大小：400；
}
h4{
字号：19px；
}
.内联{
显示：内联；
}
.清楚{
明确：两者皆有；
显示：块；
内容：“；
}
.中心{
保证金：自动；
宽度：50%；
填充：10px；
}
.收割台容器{
高度：145px；
位置：相对位置；
}
.收割台中心{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.头衔{
颜色：白色；
文本对齐：居中；
字体大小：40px；
字体系列：“空格Mono”，monospace；
字体大小：400；
线高：0px；
利润上限：35px；
}
.副标题{
颜色：白色；
文本对齐：居中；
字体大小：14px；
字体系列：“空格Mono”，monospace；
字体大小：400；
字体：斜体；
}
.内部内容{
位置：相对位置；
高度：3vw；
宽度：80%；
保证金：自动；
垫面：32.5vw；
利润上限：-28px；
左边距：10.0%；
}
格林先生{
背景#42ab9e；
}
/* ===================
名称集合
=================== */
#姓名收藏{
文本对齐：居中；
}
#名称文本{
利润率最高：-28%；
左边距：15%；
位置：绝对位置；
左边距：自动；
右边距：自动；
左：0；
右：0；
}
.nameSkipButton{
边缘顶部：25px；
背景大小：210%100%；
背景图像：线性渐变（向右，#963019 50%，#16174f 50%）；
-webkit转换：背景位置0.3s；
-moz转换：背景位置0.3s；
过渡：背景位置0.3s；
边界：无；
字体系列：“空格Mono”，monospace；
颜色：#fff；
填充：10px；
字体大小：12px；
}
.nameSkipButton:悬停{
背景位置：99%，0；
}

计算机化
Alpha只是一个用来形容未完成的单词


你好我是PC发电机，简称PCG。在我们开始之前，我可以问一下。。。
你叫什么名字？
名字

在您的

.innercontent

div中，您使用的是代表“视口宽度”的

vw

测量值-基本上这意味着框的高度将与用户查看站点的屏幕/视口的宽度相关

您需要在另一个单位中设置高度、宽度边距等，而不是

vw

，因为它会产生您看到的结果。我用叉子叉你的小提琴来演示

如果可以的话，我会用

下面是一个演示，您可能需要根据自己的需要进行调整

*{
框大小：边框框；
}
身体{
显示器：flex；
弯曲方向：立柱；
保证金：0；
最小高度：100vh；
溢出：隐藏；
背景色：#3f51b5；
}
标题，
主要的，
页脚{
边距：0.10%；//制作元素宽度的间接方式：80%；
左边框：2倍纯色浅灰色；
右边框：2倍纯色浅灰色；
}
标题，
页脚{
弹性基准：100px；
}
主要{
位置：相对位置；
柔性生长：1；
背景色：#42ab9e；
}
梅因：以前{
内容：''；
z指数：-1；
位置：绝对位置；
顶部：-2px；
右图：-100%；
底部：-2px；
左-100%；
显示：块；
边框顶部：2件纯色浅灰色；
边框底部：2倍纯色浅灰色；
}

欢迎来到StackOverflow，您的问题应该包含一个。FWIW，如果你想让你的网站反应迅速，使用绝对定位页面布局是一个糟糕的选择。当视口大小改变时，元素不能正确地相互反应。抱歉，如果您愿意，我现在可以制作一个JSFIDLE？您建议我使用什么来定位div，使它们更具响应性？如果可以，请创建一个堆栈片段。推荐