html 粘滞的页脚标记。

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 粘滞的页脚标记。相关的知识，希望对你有一定的参考价值。

$site-wrapper-max-width: 1200px;
$content-background-color: #fff;

// Site wrapper
// ============

.site-wrapper {
  & {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    max-width: $site-wrapper-max-width;
  }


  // Site wrapper
  // ------------

  > .main-wrapper {
    & {
      display: table;
      table-layout: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    > .main-content-wrapper {
      height: 100%;
      background-color: $content-background-color;
    }

    > .main-footer-wrapper {
      height: 1px;
    }

    > .main-header-wrapper,
    > .main-footer-wrapper,
    > .main-content-wrapper {
      display: table-row;
    }

    > .main-header-wrapper > .main-header,
    > .main-footer-wrapper > .main-footer,
    > .main-content-wrapper > .main-content {
      display: table-cell;
      vertical-align: top;
    }
  }
}

<body>
  <div class="site-wrapper">
    <div class="main-wrapper">
  
      <!-- Header -->
      <div class="main-header-wrapper">
        <header class="main-header">
          Header Content
        </header>
      </div>
      <!-- /Header -->

      <!-- Content -->
      <div class="main-content-wrapper">
        <main class="main-content">
          Main Content
        </main>
      </div>
      <!-- /Content -->

      <!-- Footer -->
      <div class="main-footer-wrapper">
        <footer class="main-footer">
          Footer Content
        </footer>
      </div>
      <!-- /Footer -->

    </div>
  </div>
</body>

以上是关于html 粘滞的页脚标记。的主要内容，如果未能解决你的问题，请参考以下文章

下拉菜单打破粘滞页脚

如何使用 Objective-C 修复 UIViewController 中的页脚？

React - 粘页脚问题：App 组件底部的页脚；应用程序组件不在正文底部

html 粘滞页脚