Как добавить верхний и нижний колонтитулы без полосы прокрутки на части сайта? - PullRequest
Новая
       10

Как добавить верхний и нижний колонтитулы без полосы прокрутки на части сайта?

1 голос
/ 04 апреля 2020

Как я могу прикрепить верхний и нижний колонтитулы, как в этом расширении на этом HTML? 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>

Ответы [ 3 ]

2 голосов
/ 04 апреля 2020

Вы можете попробовать такую ​​структуру: 

* { 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>
2 голосов
/ 04 апреля 2020

Неправильно понял вопрос, когда первый раз здесь работает рабочий фрагмент того, что вам нужно 

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>

Обратите внимание, что скрытие полосы прокрутки будет работать только в браузерах на основе хрома.

1 голос
/ 04 апреля 2020

Сначала вы можете попробовать извлечь <footer> из #frequency div. Затем добавьте следующее 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}
...