html - 在 "〒"中显示 div

Question

我需要显示页面的 main 部分以覆盖没有标题的屏幕其余部分。

L 和 R 部分应该是页面宽度的 50%(可能有填充)，也是 main 的 100% > 高度(即屏幕的其余部分)

+-----------------------+
|         header        |
+-----------------------+
|           |           |
|     L     |    R      |  } main
|           |           |
+-----------------------+
|        footer         |
+-----------------------+

这是我的代码 jsfiddle :

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
header {
    background-color: orange;
    height: 50px;
    width: 100%;
}
main {
    background-color: green;
    height: 100%;
    margin:0;
    padding: 10px;
    /* changeable */
    box-sizing:border-box;
    background-clip: content-box;
}

main div {        
        padding: 10px;
        height: 100%;
        background-clip: inherit;
        /* changeable */
        width:30%; /* to set=50% */
        float: left;
    }
main .left {
        background-color: yellow;
    }
main .right {
        background-color: red;
    }

<header>This is the header content.</header>
<main>
    <div class="left">50% width, 100% main height left</div>
    <div class="right">50% width, 100% main height right</div>
</main>
<footer>This is the footer content.</footer>

附言。
我需要兼容“IE9+”(所以flexbox不兼容)

第一个页面加载的结果应该如下图所示:

Answer 1

由于header的高度已知，可以使用绝对定位

header, main, footer {
  position: absolute;
  left: 0;
  right: 0;
}
header {
  top: 0;
  height: 50px;
  background-color: orange;
}
main {
  top: 50px;
  bottom: 0;
}
.left, .right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}
.left {
  left: 0;
  background-color: yellow;
}
.right {
  right: 0;
  background-color: red;
}
footer {
  top: 100%;
}

<header>This is the header content.</header>
<main>
  <div class="left">50% width, 100% main height left</div>
  <div class="right">50% width, 100% main height right</div>
</main>
<footer>This is the footer content.</footer>