Html 4个分区的布局-2个固定分区，1个动态分区（不可滚动），1个带滚动条的填充高度

我想在单个网页上使用HTML和CSS实现以下行为

我得到了前三个工作区黑色，红色，蓝色，但我有问题的滚动内容绿色。它使用静态高度，但我不知道如何动态填充页面的其余部分

这是我得到的

一个很好的选择是使用右侧的浏览器滚动条，而不仅仅是绿色内容框中的短本地滚动条

---

谢谢你的帮助

您可以通过jQuery/javascript实现这一点

首先检查页面是否有滚动条，如果不需要调整。如果没有，则需要拉伸最后一个容器以填充其余的窗口空间

将容器高度相加并从窗口高度中减去，然后将其设置为最后一个容器的高度

只是有方法像没有测试

 $(document).ready(function(){
     if(!hasScrollbar()) {
        var filled = $(".errorheader").outerHeight() + ... ;
        $(".fillcontent").height($(window).height()-filled);
     }
 });

有很多代码用于查找窗口是否有滚动条，请检查这里的stackoverflow。如果希望用户调整窗口大小，可以添加$window.resize的回调

另一种可能的解决方案是使用body元素假装最后一个容器已展开。如果容器是通过其背景来标识的，则可以使用与上一个容器相同的背景。请记住将正文设置为100%填充。

使用溢出：隐藏到html、正文、.main和溢出：滚动到.main内容，您可以模拟所需内容

HTML:

---

你想让页面的其余部分滚动，而整个堆叠的三个都粘在屏幕的顶部？顶部的三个应该始终可见，只有绿色框应该滚动。@phil？是的，就是这样！请将其添加为答案，以便我可以将答案标记为正确：

.body 
{ 
    background:red; 
    margin:0 auto;
    width:100%;
    top:0px;
}

.menu 
{ 
    background:black;
    color: white;
    height: 100px;
} 

.dynamiccontent
{
    position:fixed;
    top:50px;
    margin:0px auto;
    width:100%;     
    background: red;
}

.errorheader
{ 
    color: white;    
    text-align: center;    
    font-size: 1.4em;
}

.errorcontent
{    
    color: white;   
    text-align: center;   
}

.fixedtext 
{
    background: blue; 
    color: white;
    position: relative;
}

.fillcontent
{
    background: green; 
    position: relative; 
    overflow: auto; 
    z-index: 1; 
    height: 400px;
}

 $(document).ready(function(){
     if(!hasScrollbar()) {
        var filled = $(".errorheader").outerHeight() + ... ;
        $(".fillcontent").height($(window).height()-filled);
     }
 });

<div class="main">
    <div class="header">header</div>
    <div class="dynamic-content">
        <div class="dynamic-content-text">
            dynamic-content-text<br/>...
        </div>
        <div class="dynamic-content-fixed">dynamic-content-fixed</div>
    </div>
    <div class="main-content">
        main-content<br />...
    </div>
</div>

html,body, .main{
    margin:0;
    padding:0;
    height:100%;
    overflow: hidden;
}

.header{
    position: fixed;
    left:0;
    right:0;
    height:50px;
    background: red;
}

.dynamic-content{
    padding-top:50px;
}

.dynamic-content-text{
    background:yellow;
}

.dynamic-content-fixed{
    background:blue;
}

.main-content{
    background:green;
    height:100%;
    overflow: scroll;
}