Question

此代码完全按照我在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>

CSS calc在IE中不适用于高度

0 个答案: