Question

页面加载时，页脚未出现在正确的位置。它似乎加载到浏览器的底部（如果页面上的内容很多，我希望它超过浏览器底部到页面底部）但是当你滚动查看剩下的内容时它会保持不变放在覆盖内容的页面上（不会停留在浏览器的底部）。我设置了TemplateAssertionError: no filter named 'urlencode' [E 18:05:35.432 NotebookApp] Uncaught exception in write_error Traceback (most recent call last): File "/usr/local/lib/python2.7/dist-packages/tornado/web.py", line 1036, in send_error self.write_error(status_code, **kwargs) File "/usr/local/lib/python2.7/dist-packages/notebook/base/handlers.py", line 416, in write_error html = self.render_template('error.html', **ns) File "/usr/local/lib/python2.7/dist-packages/notebook/base/handlers.py", line 348, in render_template return template.render(**ns) File "/usr/local/lib/python2.7/dist-packages/jinja2/environment.py", line 894, in render return self.environment.handle_exception(exc_info, True) File "/usr/local/lib/python2.7/dist-packages/notebook/templates/page.html", line 107, in template data-jupyter-api-token="{{token | urlencode}}" TemplateAssertionError: no filter named 'urlencode' [E 18:05:35.433 NotebookApp] { "Accept-Language": "en-US,en;q=0.8", "Accept-Encoding": "gzip, deflate, br", "Host": "localhost:8888", "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8", "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36", "Connection": "keep-alive", "Cookie": "_xsrf=4f322a9ab22d422ebb6c3b3e2726afcf; username-localhost-8888=\"2|1:0|10:1499085248|23:username-localhost-8888|44:MjI5MGRhNjQxYzJiNDIzNWE2NDYyNzkyYjQxNTZlODE=|83797f5d04917430cca0eb57b6a2236997d44b4ef947f4b4593002c0581126cc\"", "Upgrade-Insecure-Requests": "1" } [E 18:05:35.433 NotebookApp] 500 GET /tree? token=8be5097d15e6080bbca336420a1ea0043667d2851638824c (127.0.0.1) 43.12ms referer=None Created new window in existing browser session.和position: absolute;，但这些似乎没有按预期工作。

HTML：

bottom: 0;

SASS：

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projects</title>
    <link rel="stylesheet" href="Style/style.css">
  </head>
  <body>
    <header>
      <nav class="row">
        <a class="mobileNav"></a>
        <ul class="col offset-desktop-7 desktop-5 offset-tablet-6 tablet-6 mobile-12">
          <li class="col desktop-4 tablet-4"><a href="index.html">Home</a></li>
          <li class="col desktop-4 tablet-4"><a href="portfolio.html">Projects</a></li>
          <li class="col desktop-4 tablet-4"><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
      <section class="col desktop-12 tablet-12 mobile-12">
        <h1>Lewis Blundell</h1>
        <h2>Junior Web Developer</h2>
        <h3>HTML5 | CSS3 | JavaScript | PHP | MYSQL</h3>
      </section>
    </header>
    <section class="wrapper">
      <h1 class="col desktop-12 tablet-12 mobile-12">Projects</h1>
      <article class="row">
        <aside class="col desktop-3">
          <img src="Images/placeHolder.png" alt="">
          <img src="Images/placeHolder.png" alt="">
          <img src="Images/placeHolder.png" alt="">
        </aside>
        <div class="col desktop-6">
          <p>hello</p>
        </div>
        <aside class="col desktop-3">
          <img src="Images/placeHolder.png" alt="">
          <img src="Images/placeHolder.png" alt="">
          <img src="Images/placeHolder.png" alt="">
        </aside>
      </article>
    </section>
    <footer class="row">
      <p class="col desktop-12 tablet-12 mobile-12"> Lewis Blundell &copy 2017</p>
    </footer>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="Script/script.js"></script>
</html>

网站中使用的图片：

Answer 1

尝试固定位置

position:fixed;
bottom:0;

如果你想要在浏览器页面的底部，如果你的内容高度低于窗口浏览器，如果它更多是在内容的底部你可以试试这个

body{
  position: relative;
}
footer{
  bottom:0;
}

并使用此JavaScript代码

$(document).resize(function() {
    var bh = $("body").height();
    browser_height = window.innerHeight;
    if(bh<browser_height)
      $("footer").css("position","fixed");
    else
      $("footer").css("position","absloute");
})

网站上的页脚不会停留在页面底部？

1 个答案: