布局有4个div-2固定，1个动态(不可滚动)和1个填充高度用滚动条。

Question

我希望在一个网页上使用HTML和CSS实现以下行为

​

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

这是我得到的

链接到代码

<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，您可以模拟您需要的东西。

<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

Answer 2

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

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

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

只有像(没有测试)这样的方法

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

有很多代码用于查找窗口是否有滚动条，请在这里检查堆栈溢出。如果您期望用户调整窗口的大小，可以为$( window ).resize()添加一个回调；

另一个可能的解决方案是使用body元素来假装最后一个容器展开。如果容器是根据它们的背景来标识的，您可以使用与最后一个容器相同的背景。记得把身体设置成100%的填充。