在Firefox中没有滚动条

时间:2014-02-08 07:46:27

标签: html css firefox scrollbar

我正在尝试为我的应用创建基本的管理界面,其中所有内容都应该一直显示,除了一个div,block,溢出时应该可以滚动

这是html:

<div class="all">
    <div class="header">
        <div class="logo">a</div>
        <div class="body">b</div>
    </div>
    <div class="content">
        <div class="left">c</div>
        <div class="right">
            <div class="block">
                <div class="one">A</div>
                <div class="two">B</div>
                <div class="three">C</div>
            </div>
        </div>
    </div>
</div>

和css:

    body
    {
        position:fixed; 
        top:0px; 
        left:0px;
        bottom:0px; 
        right:0px;  
        margin:0px;
    }

    .all
    {
        position: relative;
        display: table;
        width: 100%;
        height: 100%;
    }
    .header
    {
        display: table-row;
        position: relative;
        height: 50px;
    }

    .header .logo
    {
        position: relative;
        display: table-cell;
        background-color: red;

    }

    .header .body
    {
        position: relative;
        display: table-cell;
        background-color: yellow;
    }

    .content
    {
        position: relative;
        display: table-row;
    }
    .content .left
    {
        position: relative;
        display: table-cell;
        height: 100%;
        width: 150px;
        background-color: green;
    }
    .content .right
    {
        position: relative;
        display: table-cell;
        height: 100%;
        background-color: blue;
    }
    .block
    {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        overflow-y: scroll;
    }

    .one, .two, .three
    {
        border: 1px solid black;
        height: 500px;
    }
    .one
    {
        background-color: aliceblue;
    }
    .two
    {
        background-color: aqua;
    }
    .three
    {
        background-color: brown;
    }

我遇到了一个问题,在IE中,Chrome我看到滚动条,但在Firefox中没有。我创建了JS小提琴,所以你可以看到:

Link

有人可以帮助我吗?

1 个答案:

答案 0 :(得分:2)

更改为position:absolute课程上的block确实解决了您可以查看的问题this fiddle