我正在尝试为我的应用创建基本的管理界面,其中所有内容都应该一直显示,除了一个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小提琴,所以你可以看到:
有人可以帮助我吗?