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

可以使用Flexbox的实现，只有在CSS。第二个示例显示了内容溢出页面时的工作方式。

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>

Answer 2

这可以通过CSS来实现，不需要JS。

有一些方法来做到这一点，但我最喜欢的（清洁剂）如下：

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.main-content-wrapper {
  flex: 1 0 auto;
}

.footer-wrapper {
  flex-shrink: 0;
}

<body>
  <div class="main-content-wrapper">
    Your main content. Pushing the footer down.
  </div>

  <div class="footer-wrapper">
    Your footer content. Down here!
  </div>
</body>

将页脚停留在页面底部

2 个答案: