Question

我使用Flask / Jinja2块来创建HTML。我遇到了这个问题我的页脚在中间的位置。它在内容较少或没有内容的页面中看起来很好（在底部）。我已经尝试了一切。

这是HTML和CSS：

＆＃13;

h1, h2, h3, h4 { font-family: Sansita, serif }
p { font-size: smaller }
ul { position: relative; top: 25px; right: 25px }
footer{ position: absolute; width: 100%; background: aliceblue; bottom: 0; height: 50px}

＆＃13;

<!DOCTYPE html>
<html lang="en">
   <head>
      <title> books inc </title>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet">
      <link rel="stylesheet" href="/static/css/styles.css">
   </head>
   <body>
      <nav class="navbar navbar-inverse">
         <div class="container">
            <a class="navbar navbar-text" href="/">
               <h3 class="title"> The Books Shop Around the Corner </h3>
            </a>
            <ul class="nav navbar-nav pull-right">
               <li><a href=""> Home </a></li>
               <li><a href=""> Register </a></li>
               <li><a href=""> SignIn </a></li>
            </ul>
         </div>
      </nav>
      
      <div class="container books">
         <div class="row">
            <div class="col-md-4">
               <img src="static/img/broom-145379.svg"
                  alt="book-img" height="200" width="180" class="img-rounded">
               <h4>Miky&#39;s Delivery Service</h4>
               <p>Authors: William Dobelli</p>
               <p>Format: ePub</p>
               <p>Rating: 3.9</p>
               <p>Pages: 123</p>
               <p><a href="/display/publisher/1">Publisher Id: 1</a></p>
            </div>            
         </div>
      </div>
      
      <footer>
         <br>
         <p class="text-center small"> Books Inc | 2017</p>
      </footer>

   </body>
</html>

＆＃13;

Answer 1

您的问题是position: absolute。这会将项目准确放置在放置它的位置，位于屏幕的底部。如果内容溢出，则页脚会保持不变。你真正想要的是position: fixed

Answer 2

你的页脚处于绝对位置。所以使用位置：修复并构建你的css如下：：

* html footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+
   (document.documentElement.clientHeight ? 
   document.documentElement.clientHeight : document.body.clientHeight)+
  (ignoreMe = document.documentElement.scrollTop ? 
  document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

如果您想要IE6的兼容性，请不要忘记这样做。

{{1}}

您还可以删除页脚中的br。在这个用例中更喜欢使用填充顶部。它更干净。

为什么我的页脚出现在中间 - 烧瓶＆amp; Jinja2的

2 个答案: