0

这段代码完全按照我在 Firefox 和 Chrome 中的意图呈现。它在 IE11 中根本无法正确呈现。页面顶部应该有一个 100 像素高的灰色区域。两侧应有两个 200 像素宽的灰色区域，沿着窗口的高度，就在顶部灰色区域的下方。并且中间应该有一个带有滚动条的白色区域。此处类似问题中给出的建议均未奏效。如何在 IE 中完成这项工作？

<!DOCTYPE html>

<html>
  <head>
    <title></title>
    <style type="text/css">
      html, body { height:100%; margin: 0; }
    </style>
  </head>
  <body style="margin: 0;">
    <form id="MasterForm">
      <div>
        <div style="position: absolute; width: 100%; height: 100px; border-width: 0px; background: Gray; z-index: 2147483647;">
          asdf
        </div>
        <div style="position: absolute; width: 200px; height: calc(100vh - 100px); left: 0px; top: 100px; border-width: 0px; background-color: Gray;">
          asdf
        </div>
        <div style="position: absolute; width: calc(100% - 400px - 4px); height: calc(100% - 100px - 4px); left: 200px; top: 100px; border-style: inset; border-width: 2px; overflow-y: scroll;">
          <h1>CONTENT</h1>
        </div>
        <div style="position: absolute; width: 200px; height: calc(100vh - 100px); right: 0px; top: 100px; border-width: 0px; background-color: Gray;">
          asdf
        </div>
      </div>
    </form>
  </body>
</html>
4

0 回答 0