Question

＆＃13;

#wrapper {
  height: 100%;
  width: 100%;
  margin-bottom: -28px;
}
#push {
  height: 28px;
}
header {
  background-color: green;
  height: 100px;
}
footer {
  background-color: black;
  height: 28px;
}
main {
  border: 1px solid red;
  overflow-x: auto;
  overflow-y: auto;
}

＆＃13;

<div id="wrapper">

  <header>
  </header>

  <main>
    <table width="3000" height="2000" border="1">
      <tr>
        <td>sd</td>
      </tr>
    </table>
  </main>

  <div id="push"></div>

</div>

<footer>
</footer>

＆＃13;

结果div.wrapper沿y轴伸展，但页脚停留在同一个地方。溢出-x正常工作。如何启用正常的y滚动？为什么页脚固定？

通过添加<!DOCTYPE HTML>字符串来解决页脚问题。

Answer 1

将wrapper div的高度计算为100vh减去28px（这是footer的高度。
从margin移除wrapper。这不是必需的。
在overflow:hidden上设置wrapper。
将main的高度计算为100%减去28px（push）减去100px（header）
在overflow:auto上设置适当的main。

* { box-sizing: border-box; padding:0; margin: 0; }
#wrapper {
  height: calc(100vh - 28px);
  width: 100vw;
  overflow: hidden;
}
#push { height: 28px; background-color: yellow; }
header { background-color: green; height: 100px; }
footer { background-color: black; height: 28px; }
main {
  height: calc(100% - 100px - 28px);
  border: 1px solid red;
  overflow: auto;
}

<div id="wrapper">
  <header></header>
  <main>
    <table width="3000" height="2000" border="1">
      <tr>
        <td>sd</td>
      </tr>
    </table>
  </main>
  <div id="push"></div>
</div>
<footer></footer>

_{注意：编辑回答以反映main。正如@Oriol所指出的，main是一个非常有效的HTML5元素。}

溢出-y不能正常工作

1 个答案: