Question

我尝试创建布局“视口”，顶部固定高度，页脚固定高度，剩余高度中间部分。我需要使用div标签来做到这一点。这是发生的事情

HTML：

<div class="table-cui-a2c">
<div class="row-cui-a2c" style="height: 50px;">
    <div class="cell-cui-a2c">
    </div>
</div>
<div class="row-cui-a2c" >
    <div class="cell-cui-a2c" >
        <div class="block" ></div>
    </div>
</div>
<div class="row-cui-a2c" style="height: 50px;">
    <div class="cell-cui-a2c">
    </div>
</div>

的CSS：

html {display:block; position:static; width:100%; height:100%; margin:0px; padding:0px; border:none; overflow:hidden;}
body {font-family:Helvetica, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:14px; width:100%; height:100%; font-weight:300; padding:0px; margin:0px;}

html * {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

.table-cui-a2c {display:table; width:100%; height:100%;}
.row-cui-a2c {display:table-row; width:100%; height:100%;}
.cell-cui-a2c {display:table-cell; text-align:center; vertical-align:middle; border:1px dotted black; overflow:scroll;}

.block {display:block; width:100%; height:200%; background:#d0d0d0; border:1px dashed red;}

http://jsfiddle.net/roskoshinsky/htv2bq1q/

我希望这将成为垂直滚动的核心部分。但这并没有发生。而且，我在FireFox中看到了错误的映射。

如何解决这个问题？

Answer 1

如果我不误解这应该解决你的问题

＆＃13;

<div class="fixed-top"></div>
<div class="fluid-center"></div>
<div class="fixed-bottom"></div>

＆＃13;

viewport units

＆＃13;

如果您无法使用html, body{ margin: 0; padding: 0; height: 100%; /*set height: 100% to all containers of the divs*/ } .fixed-top{ height: 50px; background-color: #5cb85c; } .fluid-center{ height: calc(100% - 150px);/*using %*/ background-color: indianred; overflow: auto; } .fixed-bottom{ height: 100px; background-color: #269abc; }，请使用此解决方案

＆＃13;

<div class="fixed-top"></div>
<div class="fluid-center"></div>
<div class="fixed-bottom"></div>

＆＃13;

#include <iostream>

#include "Parser.h"

using namespace std;

const char *filename = "main.c";

int main()
{
    cout<<"Parser"<<endl;

    Parser *p = new Parser(filename);
    p->parse();

   return 0;
 }

＆＃13;

使用divs标签的固定高度的布局视口

1 个答案: