javascript - 将页脚粘贴到页面底部

Question

如果主高度小于文档高度，如何让页脚贴在页面底部？
https://planbuildr.com/login?skin=purple
目前我正在这样做，但我认为这是错误的，因为内页(登录后)的页脚在屏幕下方。

<script>
$(document).ready(function()
{
    // Change height of container
    if ($("#main").height() < $(document).height())
     $("#main").height($(document).height() - 152); // 132
});
</script>

我不确定我是否应该使用纯 CSS 解决方案。我不介意是否使用 JavaScript 来检测高度。

带有PHP代码的HTML代码体是这样的:

<div id="container">
    <header style="background-color:#3264f2;height:43px">
        <?php require_once CB_DIR_UI.$CB['skin'].'/html/header.html'; ?>
    </header>

    <main id="main" style="width:calc(100% - 300px);margin:20px auto 0 auto;padding:10px;border:7.5px solid #666666;border-radius: 10px;background-color:#f6f7fa;overflow-y:auto">
        <?php require_once CB_DIR_UI.$CB['skin'].'/html/'.$CB['template_file']; ?>    
    </main>    

    <div class="clear"></div>    

    <footer style="margin-top:20px">
        <?php require_once CB_DIR_UI.$CB['skin'].'/html/footer.html'; ?>
    </footer>    

</div>

Answer 1

只有在 css 中使用 flexbox 才能实现这一点。第二个示例展示了当内容溢出页面时它是如何工作的。

body {
  margin: 0;
}

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header, section, footer {
  padding: 8px;
}

section {
  flex: 1;
  background: silver;
}

<main>
  <header>Header</header>
  <section>Content</section>
  <footer>Footer</footer>
</main>

    body {
      margin: 0;
    }

    main {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    header, section, footer {
      padding: 8px;
    }

    section {
      flex: 1;
      background: silver;
    }

<main>
  <header>Header</header>
  <section>
    Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>
  </section>
  <footer>Footer</footer>
</main>