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

Question

这是我的 fiddle http://jsfiddle.net/9m1Lba6u/

这适用于 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 方法(不过它需要更多的包装器)

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;
}