web-dev-qa-db-ja.com

画面の下部に常に表示されるフッターを追加しますか？

ページの内容が非常に小さい場合でも、常に画面の下部にあるフッターを追加するにはどうすればよいですか。

たとえば、問題が発生した場合、ページにあまり表示されていないため、フッターが画面の中央に表示されます。ページに多くのコンテンツが含まれていない場合、フッターが画面の下部にあることを確認できますか？

[〜＃〜] update [〜＃〜]

画面全体を埋めるのに十分なコンテンツがない場合（つまり、画面の中央にフッターを表示したくない場合）、画面の下部にあるフッターが必要です。ページの一番下に移動します。

htmlcssscreenfootersticky-footer
11
user646560

あなたは「スティッキーフッター」を求めています。この記事では、使用できるテクニックのいくつかを示します。

これがflexboxバージョン： http://codepen.io/chriscoyier/pen/RRbKrL

HTML：

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS：

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
13
thirtydot

次のcssプロパティを使用します。

position: fixed;
bottom: 0px;
12
Ciprian Radu

以下に示すように、位置にスティッキーを使用することもできます。

.footer {
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
}

このコードを実行して、これが探しているタイプの固定フッターであるかどうかを確認できます。

body {
  display: grid;
  min-height: 100vh;
  min-width: 100%;
  grid-template: "header main" "footer footer";
  grid-template-columns: 100px 1fr;
  grid-template-rows: 1fr 50px;
  grid-gap: 10px;
}

body>div {
  background-color: rgba(0, 51, 204, 0.5);
}

.header {
  grid-area: header
}

.main-content {
  grid-area: main;
  text-align: center;
}

.footer {
  grid-area: footer;
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
  z-index: 10;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Footer Stay!</title>
  <link rel="stylesheet" type="text/css" href="../style/footer.css">
</head>

<body>
  <div class="header">
    Header
  </div>
  <div class="main-content">main content</div>
  <div class="footer">footer </div>
</body>


</html>
1
Joseph Hoxsey

これはCSSのみのソリューションであり、jQueryは必要ありません。ラッパーの最小の高さを100％にして相対的に配置し、フッターを完全に左下に配置します。

#wrapper {
    min-height:100%;
    position:relative;
}

#content {
    padding-bottom:80px;
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
}

ソース

1
ZurabWeb

ページの下部にバインドされている固定位置要素を使用することをお勧めします。

フッターを囲むためにdivを使用するとします。次のようなCSSが必要になります。

div#footer{
  position: fixed;
  z-index: 1000000;
  overflow: hidden;
  bottom: 0px;
  left: 0px;
  height: 100px;
  width: 600px;
}

ユーザーがフォームのサイズを変更するときに、高さと幅を更新することをお勧めします。おそらく、ページロード時に幅のサイズも変更する必要があります。

0
tjarratt

bootstrapクラスを使用

 <footer class="container-fluid text-center">
   <div class="footer navbar-inverse navbar-fixed-bottom">
     <p>Footer is here</p>
   </div>
 </footer>
0
rashedcs