0

ヘッダーとフッターの高さが固定で、コンテンツが残りの高さの 100% を占めるページが必要です。

私は現在、Chrome で作業したい動作をしていますが、Internet Explorer では、行が目的の高さを超えて大きくなり、ページからフッターが強制的に外れます (ページのスクロールバーで示されます)。Internet Explorer の問題を解決する方法は一生見つかりません。

目的の動作 (Chrome の場合) は次のとおりです。行はコンテンツに合わせて拡大されず、代わりにスクロールする機能があることに注意してください。

望ましい動作

Internet Explorer で発生している望ましくない動作は次のとおりです。

望ましくない動作

これが私が取っているアプローチです：

<head>
   <style>
      body {
         margin: 0px;
         table-layout:fixed;
      }
      table {
         border-collapse:collapse;
      }
      table, tr, td {
         overflow:hidden;
         padding: 0px;
      }
   </style>
</head>

<body>
   <table style="width:100%; height:100%; top:0px; bottom:0px;">
      <!--HEADER-->
      <tr style="height:100px;">
         <td colspan="2" style="background-color:#ff0000; text-align:center;">
            <h1>Piano Festival</h1>
         </td>
      </tr>

      <!--CONTENTS-->
      <tr>
         <!--LEFT CONTENT PANE-->
         <td style="background-color:#ff00ff;">
            <div style="height:100%; overflow-y:scroll;">
            <form>
               <!--Form contents here-->
            </form>
            </div>
         </td>

         <!--RIGHT CONTENT PANE-->
         <td style="background-color:#00ffff; width:100%;">
         </td>
      </tr>

      <!--FOOTER-->
      <tr style="height:100px;">
         <td colspan="2" style="background-color:#00ff00";>
         </td>
      </tr>
   </table>
</body>

Javascript や CSS 拡張機能の使用は避けたいと思います。この問題を回避するにはどうすれば、現在 Chrome で行っているのと同じ動作 (行の高さの代わりにスクロール可能なコンテンツ) を IE で行うことができますか?

4

1 に答える 1