Html 垂直放置三个元素：柔性框、滚动框和；固定盒

使用css是否可以执行以下操作？如果没有，即使绿框更改内容，也会使用哪些javascript事件

我想垂直放置三个框：

第一个（绿色的）可以有不同数量的内容，框应该展开以适应内容。此框应与浏览器顶部齐平

最后一个，黄色的，将有固定数量的内容（这意味着我知道“编译时”的内容是什么）。此框应与浏览器底部齐平

中间的一个，红色的，将有一个灵活的内容量，应该从绿色框的底部延伸到黄色框的顶部，在内部，如果它的内容大于框的大小，它需要滚动

这就是我到目前为止得到的结果，但它不太管用-我似乎无法使黄色框的底部与视口的底部齐平，从而让红色框占据所有额外的空间（即位置：绝对似乎没有帮助）

#容器{
浮动：左；
身高：100%；
背景颜色：灰色；
}
#标题{
背景颜色：绿色；
}
#主要{
溢出：自动；
背景色：红色；
身高：70%；
}
#页脚{
背景颜色：黄色；
}
标题内容的开始。。。
工艺啤酒牛仔短裤。。。
这里有一些东西

这就是它看起来的样子：

这里有一个JSFIDLE:，但请注意它可能没有帮助，因为html框不符合视口大小-不知道如何做到这一点

#container {
    float: left;
    height: 100%;
    background-color:gray;
    position: relative;
}

#header {
    background-color: green;
    height: auto;
}

#main {
    overflow: auto;
    background-color: red;
    height: 70%;
    overflow-y: scroll
    -webkit-overflow-y: scroll;
    -moz-overflow-y: scroll;
}

#footer {
    background-color:yellow;
    height: 25px;
}

我会这样做。没有理由变得太复杂。

链接：

我还将使用主id的设置像素，因为您正试图建立一个滚动内容div

如果我错了，请纠正我，但我也相信这些应该是类而不是id。类用于可重用的名称，例如，您可以使用一个类来更新div的所有颜色，但不会使用id。如果您需要某些特定的内容，则会使用id，而这些内容不会在站点上的其他任何地方实现。这只是一个很好的编程实践，在以后使用JavaScript时会有所回报

ID=单个变更元素

---

类=可重用的多个元素。

这可以通过

flexbox

轻松完成。检查兼容性

html，
身体{
宽度：100%；
身高：100%；
}
#容器{
浮动：左；
身高：100%；
背景颜色：紫色；
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
}
#标题{
背景颜色：绿色；
}
#主要{
溢出：隐藏；
溢出y：滚动；
-webkit溢出滚动：触摸；
背景色：红色；
弹性：1；
柔性生长：1；
}
#页脚{
背景颜色：黄色；
}

标题内容的开始，并且查看器应该能够看到所有内容。Ipsum爆炸机jango fett-alderaan数据存储库validium超立方体。安的列斯群岛的梅斯·温杜·乌胡拉·辛迪千年隼·博坦消灭了泰利姆矿石。恩多·摩尔·天行者与安的列斯群岛的泰利姆矿石永远匹配。Paradox机器学徒，飞行医生，切巴卡·阿特·弗拉克·达戈巴冰枪。Uhura数据光子鱼雷worf着陆器星巴克超立方体酒馆。标题内容结尾
Craft beer jean短裤beard green juice kinfolk 8位连帽衫单一产地咖啡凸版seitan四美元吐司吊床Occession selfies pug。复古locavore冥想工艺啤酒病毒，乙烯基健康哥特信誉屠夫回声公园。回声公园波特兰helvetica屋顶派对吊床，食品卡车信使袋弹出式poutine master cleanse hella artisan etsy。在他们将凌乱的chillwave农场出售给餐桌之前，Celiac polaroid，紧身裤工艺啤酒mlkshk病毒性精加工纯素知识分子。Yuccie synth poutine下一级食品卡车，meggings chambray美学农场，餐桌marfa helvetica dreamcatcher蓝瓶咕哝早午餐。Fixie Narhall lomo，艺术派对pinterest直接贸易poutine mlkshk有机饲料讽刺。Wolf kickstarter正宗捕梦格呢。
Yuccie tilde努力自拍绅士DIY。下脚料、乳糜泻、上流社会的玉米坑、恰亚胡须、藜麦、弗里根马法、雷霆猫，倾泻在synth身上。Migas salvia franzen pabst，博客listicle freegan chia YOLO时尚斧头locavore内脏。古色古香的信使包，3只狼月亮诺姆科勒美学的小矮人帕格独角鲸低保真洛莫伐木工。Chambray yuccie自拍，纹身生物柴油干草叉艺人混音带实际上是iPhone单源咖啡8位大师级清洁美感。Kickstarter chillwave VHS凌乱的绿色果汁。梅金咕哝咕哝着说，绅士，查姆布雷，蓝瓶，布鲁克林。
四美元烤面包片sriracha吊床iPhone正宗藜麦旅行者弹出式动物标本后讽刺下一层内脏YOLO Chartrese fingerstache。饲料鼠尾草直接贸易照片摊位YOLO，fixie古裁缝深v。酿酒厂艺术派对弹出式meggings裁缝师thundercats副，波特兰牛仔短裤法兰绒成衣godard。3狼月亮单一来源咖啡你可能还没听说过他们chillwave自拍cred。Scenester不对称精檀蓝瓶苦味酒banh mi swag，etsy打乱90年代。康普茶诺姆科尔回声公园，布什维克小镇复古摄影亭，售罄前。Chillwave艺术派对的传家宝。
陈词滥调正宗古手指Stache banjo实际上是工匠sriracha helvetica twee，波特兰PBR&B信托基金。审美猪肉肚弹出苦味酿酒厂，banh mi try hard cred冥想活版印刷品schlitz 90年代的腹腔中性酒。讽刺的街头艺术实际上是陈词滥调的不对称。自行车权利康普茶胡子十字架，深v克雷3狼月亮listicle之前，他们出售了破旧别致的酿酒厂干草叉。Meh美感墨西哥玉米卷法兰绒，帕格古DIY奥斯汀。Gastropub kinfolk陈词滥调十字架，swag post讽刺讽刺传家宝keytar thundercats
#container {
    float: left;
    height: 100%;
    background-color:gray;
    position: relative;
}

#header {
    background-color: green;
    height: auto;
}

#main {
    overflow: auto;
    background-color: red;
    height: 70%;
    overflow-y: scroll
    -webkit-overflow-y: scroll;
    -moz-overflow-y: scroll;
}

#footer {
    background-color:yellow;
    height: 25px;
}

.container {
  height: 100vh;
}

.top {
  background-color: #f2f2f2;
  height: 24vh;
  overflow: hidden;
  padding: 20px;
}

.middle {
  background-color: #h2h2h2; 
  height: 55vh;
  padding: 20px;
  overflow-y: scroll;
}
.bottom {
  background-color: #d2d2d2;
  height: 3vh;
  padding: 20px;
  position: fixed;
  bottom: 0;
  width: 100%;
}