Question

此功能适用于Google Chrome和Safari，并显示从1到最后的所有数字。但是在FireFox中它只显示到99.我在样式表中遗漏了一些东西吗？

这是我的代码的简短版本：

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  overflow: hidden;
}
.head {
  width: 100%;
  height: 60px;
  background-color: #CDF1F4;
}
.main-content {
  width: 70%;
  height: 100%;
  padding-bottom: 70px;
  float: right;
  background-color: #BEE4F4;
  overflow: auto;
  box-sizing: border-box;
}
.side-bar {
  width: 30%;
  height: 100%;
  padding-bottom: 70px;
  float: left;
  background-color: #E1BEF4;
  overflow: auto;
  box-sizing: border-box;
}

<div class="head"></div>
<div class="main-content"></div>
<div class="side-bar"></div>

Answer 1

这是一个简单的CSS2 approch（虽然它需要几个包装器）

HTML：

<div class="head"></div>
<div class="page">
    <div class="page-inner">
        <div class="main-content">first
            <br>1
            <br>2
            <br>3
            <br>4
            .....
            <br>99
            <br>100
            <br>
            <br>last
        </div>
        <div class="side-bar">first
            <br>1
            <br>2
            <br>3
            <br>4
            .....
            <br>99
            <br>100
            <br>
            <br>last
        </div>
    </div>
</div>

CSS：

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
}
body:before{
    content:'';
    float:left;
    height: 100%;
}
.head {
    width: 100%;
    height: 60px;
    background-color: #CDF1F4;
}
.page{position:relative;}
.page:after{content:''; display:block; clear:both;}
.page-inner{position:absolute; left:0; right:0; top:0; bottom:0;}
.main-content {
    width: 70%;
    height: 100%;
    float: right;
    background-color: #BEE4F4;
    overflow: auto;
}
.side-bar {
    width: 30%;
    height: 100%;
    float: left;
    background-color: #E1BEF4;
    overflow: auto;
}
.footer {
    width: 100%;
    height: 160px;
    background-color: #F4BED6;
}

Answer 2

变化

overflow: scroll;

在.main-content和.side-bar中，它适用于我

如何让FireFox了解我的div的正确高度？

2 个答案: