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 扩展。如何解决这个问题，以便我在 IE 中获得与我现在在 Chrome 中相同的行为（可滚动内容而不是不断增长的行高）？

4

1 回答 1

0

我也强烈建议不要为此使用表格。这是一个使用 div 来帮助您入门的重构版本。

HTML：

<div class="header">
  <h1>Piano Festival</h1>
</div>

<div class="registration">
  ...lots of stuff....
</div>

<div class="main">
  Main section
</div>

<div class="footer">
  footer
</div>

这是CSS：

body, html {
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}

.header {
  margin: 0;
  background: darkgreen;
  height: 10%;
}

.registration {
  background: deeppink;
  width: 20%;
  overflow: auto;
  height: 80%;
  float: left;
}

.main {
  display: inline-block;
}

.footer {
  background: blue;
  height: 10%;
  position: fixed;
  width: 100%;
  bottom: 0;
}

这是一个工作演示。

于 2015-04-02T23:23:30.823 回答