ブートストラップレスポンススティッキーフッタ

私は、ページの下部に留まっているシンプルなフッタで、1日間サークルに行ってきました。ブートストラップレスポンススティッキーフッタ

私はフルスクリーンページの一番下に表示されています。しかし、ブラウザのウィンドウの幅を小さくしてレスポンシブディスプレイをシミュレートすると、ページを下にスクロールしてもフッタが同じ場所にとどまるので、フラッシュされません。

<html> 
<body> 

<div class="container"> 

<div class="row text-center"> 

<p> Blablabla </p> 

</div> <!-- row --> 

</div> <!-- container --> 

    <div class="footer text-center"> 
      <p class="small">Alright !</p> 
    </div> 

</body> 
</html>

そして、私のCSS：私はこのようなフッターにブートストラップのコラムを試してみた

html { 
height: 100%; 
} 

body { 
    height: 100%; 
    padding-bottom: 30px;   
} 

.footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 30px; 
}

：ここ

は私のhtmlです

<div class="col-md-12 col-xs-12"> 

    <div class="footer text-center"> 
      <p class="small">&#169; 2017 Le Point G</p> 
     </div> 

</div>

しかし、この方法ではありませんコンテンツの量が1ページと異なるため、異なるページで矛盾するので適切ではないようですフッタを多かれ少なかれ押していく。

もっと良い提案がありますか？

出典

2017-02-28 mattvent

あなたはposition:absoluteは自分のコンテナまたは行に

min-height:100%;position:relative;

を追加することができます。

.row { 
 
min-height:100%; 
 
    position:relative; 
 
} 
 
html { 
 
height: 100%; 
 
} 
 

 
body { 
 

 
    
 
    padding-bottom: 30px;   
 
} 
 

 
.footer { 
 
position:absolute; 
 
    background-color: blue; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
}

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
     
 
     <style type="text/css"> 
 
     
 

 
     </style> 
 
     <script type="text/javascript"> 
 
     
 
     </script> 
 
     </head> 
 
     <body> 
 
     
 
     
 

 
<div class="container"> 
 

 
<div class="row text-center" > 
 

 
<p> Blablabla </p> 
 

 
</div> <!-- row --> 
 

 
</div> <!-- container --> 
 

 
    <div class="footer text-center"> 
 
      <p class="small">Alright !</p> 
 
    </div> 
 

 

 
</body> 
 
</html>

説明

は、コンテナのdivがmin-height:100%を持っている - これはどんなコンテンツがほとんどない場合でも、画面の全高をとどまるようになります。コンテナdivはposition:relative;に設定されているため、内部で要素を絶対的に配置することができます。フッターの高さはpxです。フッターはbottom：0で絶対的に配置され、コンテナdivの下部に移動します。ページにコンテンツがほとんどない場合、コンテナdivはブラウザのビューポートの高さと同じです（min-height:100%に設定されているため、フッターは画面の下部にあります）。 2ページ以上のコンテンツがある場合、コンテナdivは大きくなり、view-portの下から下に伸びます。フッターはコンテナdivの下にあります。フッタもwidth:100%;に設定されているため、ページ全体をカバーしています。

出典

2017-02-28 13:56:49 neophyte

しかし、私がしなければ、それはときにページで一番下に滞在していない、ということそれを「押し下げる」ための十分なコンテンツがありません。 – mattvent

内容の長さが足りない場合でもフッターが最下部にとどまるように身体に最小幅を与える必要があります – neophyte

この最小幅はどのくらい必要ですか？ – mattvent

質問が正しく理解されている場合は、ページの内容の長さにかかわらず、フッターが常にウィンドウの下部に固定されます。

もしそうなら、position: fixed代わりのBootstrap3でposition: absolute

html { 
 
height: 100%; 
 
} 
 

 
body { 
 
    height: 100%; 
 
    padding-bottom:30px; 
 
} 
 

 
.footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
    background-color:white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<html> 
 
<body> 
 

 
<div class="container"> 
 

 
<div class="row text-center"> 
 

 
<h1>HTML Ipsum Presents</h1> 
 

 
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> 
 

 
<h2>Header Level 2</h2> 
 

 
<ol> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
</ol> 
 

 
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote> 
 

 
<h3>Header Level 3</h3> 
 

 
<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
</ul> 
 

 
<pre><code> 
 
#header h1 a { 
 
    display: block; 
 
    width: 300px; 
 
    height: 80px; 
 
} 
 
</code></pre> 
 

 
</div> <!-- row --> 
 

 
</div> <!-- container --> 
 

 
    <div class="footer text-center"> 
 
      <p class="small">Alright !</p> 
 
    </div> 
 

 
</body> 
 
</html>

出典

2017-02-28 13:59:04 Mobius

私が自分自身を不明瞭に表現したのなら、すみません。私はそれを固定したくないのですが、常にページの一番下に、特にウィンドウの幅が狭くなったら、これは私が達成しようとしているものです。 – mattvent

「固定していない」場合は、「常にページの一番下にある」という意味ではわかりません。ページごとに、コンテンツやウィンドウを参照していますか？ – Mobius

あなたはクラスnavbar-fixed-bottomを使用することができますしてみてください。それはいいですが、それは動作します。

HTML：

<html> 
<head>..</head> 
<body>.... 
    <div class="navbar-fixed-bottom"> 
     <p>Your Text</p> 
    </div> 
</body> 
</html>

Something like that, but with "div" tags - w3schools

スニペット：

html, body { 
 
    margin: 0%; 
 
    padding: 0%; 
 
} 
 

 
.container { 
 
    height: 600px; 
 
    background-color: #6c6c6c; 
 
} 
 

 
myFooter { 
 
    background-color: #fff; 
 
} 
 

 
@media screen and (min-width: 480px){ 
 
    footer { 
 
    position: absoulute; 
 
    bottom: 0; 
 
    background-color: #000 !important; 
 
    } 
 
}

<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="container-fluid text-center"> 
 
    <p>Some Text in Container</p> 
 
    </div> 
 
    
 
    <footer class="myFooter text-center"> 
 
    <p>Footer Text - Resize Window</p> 
 
    </footer> 
 
</body>

出典

2017-02-28 14:02:17

誤解をおかけして申し訳ありません。私はフッタを固定したくないが、常にデスクトップページでは実現したが、モバイルページでは実現しなかったページの最下部にある。 – mattvent

あなたは '@media screenと（min-width：480px）'のようなものをCSSとしてクラスやフッタに追加することができます。そこで、 'position：fixed;'のようなCSSルールを追加して、ページの一番下にフッターを設定することができます。 –

私は私の答えを編集しました。スニペットでは、CSSで@media ...を追加しました。ここでは、下部にフッタを設定するCSSを追加できるようになりました。 –

ブートストラップレスポンススティッキーフッタ

答えて

関連する問題