如何在没有滚动条的网站上添加页眉和页脚？

Question

我怎样才能像在这个扩展中那样粘贴页眉和页脚呢？Honey Extension Img，并且只在页眉和页脚之间滚动内容。在这个项目中，我使用Materialize CSS框架，我可以在这个框架中做到这一点吗？

    <header>
        <div class="section"></div>
        <h4 class="center-align">text1</h4>
        <div class="section"></div>
    </header>
    <div id="frequency" class="col s12">
        <table class="highlight">
            <thead>
                <tr class="teal lighten-2">
                    <th class="center-align">text1</th>
                    <th class="center-align">text1</th>
                    <th class="center-align">text1</th>
                    <th class="center-align">tex1</br>(text1)</th>
                </tr>
            </thead>
            <tbody id="frequencyTable">
            </tbody>
        </table>
        <footer>
            <div class="section"></div>
            <div class="center-align row">
                <a class="col s12 waves-effect waves-light btn-large tooltipped" data-position="top" data-tooltip="Zapisz zmiany">Zapisz</a>
            </div>
        </footer>

    </div>

Answer 1

您可以尝试这样的结构：

​

* { margin: 0; padding:0; }

header {
  width: 100%;
  height: 50px;
  background-color: red;
  position: fixed;
  top: 0;
  left: 0;
}

#frequency {
  background-color: orange;
  height: calc(100vh - 100px);
  overflow: auto;
  position: relative;
  top: 50px;
}

footer {
  background-color: yellow;
  position: fixed;
  bottom: 0;
  left: 0;
    width: 100%;
  height: 50px;
}

    <header>
        <div class="section"></div>
        <h4 class="center-align">text1</h4>
        <div class="section"></div>
    </header>
    <div id="frequency" class="col s12">
        <table class="highlight">
            <thead>
                <tr class="teal lighten-2">
                    <th class="center-align">text1</th>
                    <th class="center-align">text1</th>
                    <th class="center-align">text1</th>
                    <th class="center-align">tex1</br>(text1)</th>
                </tr>
            </thead>
            <tbody id="frequencyTable">
            <tr>
              <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolt.</td>
              <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolt.</td>
              <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolt.</td>
              <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolt.</td>
            </tr>
            </tbody>
        </table>
        <footer>
            <div class="section"></div>
            <div class="center-align row">
                <a class="col s12 waves-effect waves-light btn-large tooltipped" data-position="top" data-tooltip="Zapisz zmiany">Zapisz</a>
            </div>
        </footer>

    </div>

​

Answer 2

第一次误解的问题是您所需要的工作代码片段

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

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header,
.footer {
  background: silver;
}

.content {
  flex: 1;
  overflow: auto;
  background: pink;
}

::-webkit-scrollbar {
  width: 0px;
  /* Remove scrollbar space */
  background: transparent;
  /* Optional: just make scrollbar invisible */
}

<div class="wrapper">
  <div class="header">
    <div class="section"></div>
    <h4 class="center-align">text1</h4>
    <div class="section"></div>
  </div>
  <div class="content">
    <div style="height:1000px;">
      <div id="frequency" class="col s12">
        <table class="highlight">
          <thead>
            <tr class="teal lighten-2">
              <th class="center-align">text1</th>
              <th class="center-align">text1</th>
              <th class="center-align">text1</th>
              <th class="center-align">tex1</th>
            </tr>
          </thead>
          <tbody id="frequencyTable">
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="section"></div>
    <div class="center-align row">
      <a class="col s12 waves-effect waves-light btn-large tooltipped" data-position="top" data-tooltip="Zapisz zmiany">Zapisz</a>
    </div>
  </div>

​

请注意，滚动条的隐藏只适用于基于铬的浏览器。

Answer 3

首先，您可以尝试从#frequency目录中取出<footer>。然后添加以下css：

header {position: fixed; top: 0; left: 0; width: 100%; z-index: 1}
footer {position: fixed; bottom: 0; left: 0; width: 100%; z-index: 2}