1


我想在单个网页上使用 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;
}

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

谢谢您的帮助！

4

2 回答 2

0

您可以使用 jQuery/javascript 来实现这一点。

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

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

只要有类似的方法（未测试）

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

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

另一种可能的解决方案是使用 body 元素来假装最后一个容器展开。如果容器由它们的背景识别，您可以使用与最后一个容器相同的背景。只需记住将主体设置为填充 100%。

于 2013-11-04T06:45:42.287 回答
0

使用overflow:hiddentohtml,body,.main和overflow:scrollto .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

于 2013-11-04T07:06:45.413 回答