html - 具有 4 个 div 的布局 - 2 个固定、1 个动态(不可滚动)和 1 个带滚动条的填充高度

Question

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

我的前三个区域(黑色、红色、蓝色)可以正常工作，但我在滚动内容(绿色)方面遇到了问题。它适用于静态高度，但我不知道如何动态填充页面的其余部分。

这是我得到的

Link to Code

<div class="body">   
<div class="menu">
    menu
</div>           
<div>
    <div class="dynamiccontent">
        <div class="errorheader">
            Errors
        </div>
        <div class="errorcontent">
            errors   
        </div>
        <div class="fixedtext">
            some text
        </div>            
        <div class="fillcontent">
            fillcontent
        </div>
    </div>
</div>

.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;
}

一个不错的选择是在右侧使用“浏览器滚动条”(不仅仅是绿色内容框中的短本地滚动条)。

感谢您的帮助!

Answer 1

使用 overflow:hidden 到 html,body,.main 和 overflow:scroll 到 .main-content，你可以模拟你所需要的。

HTML:

<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>

CSS:

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;
}

JSFiddle