Question

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

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

这是我得到的

<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

您可以使用jQuery / javascript实现此目的。

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

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

只需要像（未测试）

这样的方法

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

有很多代码可以查找窗口是否有滚动条，请在此处查看stackoverflow。如果您希望用户调整窗口大小，可以为$（window）添加回调.resize（）;

另一种可能的解决方案是使用body元素伪造最后一个容器扩展。如果容器由其背景标识，则可以使用与最后一个容器相同的背景。只记得将身体设置为100％填充。

Answer 2

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

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

2 个答案: