私のフッタが真ん中に現れる理由 - フラスコ＆jinja2

私はFlask/Jinja2ブロックを使用してHTMLを作成しています。私はこの問題に遭遇しました私のフッターは中央にあります。コンテンツが少ないか無いページでは、ページの下部に表示されても問題ありません。私はすべてを試しました。あなたの問題はposition: absoluteある私のフッタが真ん中に現れる理由 - フラスコ＆jinja2

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}

<!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>

出典

2017-06-28 Hara

：ここ

は、HTMLとCSSです。それは、画面の下部にある、それを置くと言うところに正確に項目を配置します。コンテンツがオーバーフローした場合、フッターはそのまま残ります。本当に欲しいのはposition: fixed

出典

2017-06-28 05:22:40 robru

フッターは絶対位置にあります。だから、使用位置：固定とをfolowとしてあなたのCSSを構築：

footer { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:50px; 
    width:100%; 
    background: aliceblue; 
}

あなたはIE6の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'); }

また、フッター内のbrを削除することもできます。この使用例では、パディングトップを使用することをお勧めします。はるかにクリーンです。

出典

2017-06-28 08:24:09 1ronmat

私のフッタが真ん中に現れる理由 - フラスコ＆jinja2

答えて

関連する問題