3

ページの下部にフッターを配置したいと考えています。

たとえば、コンテンツがあまりないページでは、下部にフッターが必要ですが、ページの高さよりも長いコンテンツがある場合は、フッターを押し下げる必要があります。

CSS のみで実行できますか、それとも jQuery マジックを追加する必要がありますか?

ここに画像の説明を入力

4

6 に答える 6

1

スティッキーフッターテクニックのいずれかを使用する必要があります

于 2012-09-18T19:35:29.677 に答える
1

これは、CSS を使用して行うことができます。

1) HTML にフッターを設定する

<body>
  ...
  <div id="footer">...</div>
</body>

2) CSS ポジショニングを使用して下部に配置します。

html {
  padding-bottom:50px;
  position:relative;
}

body {
  position:relative;
  min-height:100%;
}

#footer {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:50px;
}
于 2012-09-18T19:36:30.463 に答える
1

以前のすべての CSS ソリューションでは、フッターの高さを一定にする必要がありました。すべての適切なブラウザーでは、次の解決策により、フッターの高さを動的に変更する問題が解決されます。

html { height: 100%; }

body {
    margin        : 0;
    min-height    : 100%;
    display       : flex;
    flex-direction: column;
}

body > .content { flex-grow:   1; background: ghostwhite; }
body >  footer  { flex-shrink: 1; background: gold; }
<div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis luctus mauris nec lacinia. Maecenas egestas, nisl sed volutpat consectetur, urna orci bibendum lorem, sit amet maximus dolor massa et mi. Duis elit neque, interdum nec euismod sed, interdum ac dui. Maecenas non ornare nibh. Vestibulum malesuada et sem quis mattis. Phasellus a justo non dolor porta faucibus sed id lectus. Nullam imperdiet, velit eu convallis ornare, ipsum augue vestibulum lectus, finibus bibendum nulla libero a augue. Aenean eleifend sapien eu placerat facilisis. Vestibulum pulvinar pretium neque, in ullamcorper orci semper nec. Donec rhoncus velit magna, eget dapibus augue cursus quis. Proin in nisi ut tortor finibus tristique vitae vel libero. Aliquam placerat diam nec consectetur tristique. Praesent bibendum diam id velit pellentesque facilisis. In quis odio nec tortor cursus commodo in eu nisl. Nullam non interdum enim, a faucibus metus. Mauris posuere erat id vestibulum eleifend.  </div>
<footer> {{ footer }} </footer>

于 2015-08-13T17:59:31.343 に答える
0

このようにフッターの上に別の div を作成し、両方に clear を追加すると、フッターがプッシュされます。

<style type="text/css">
.push{
clear:both;
height:5px;
width:5px;
display:block;
position:relative;
margin:0 auto;
}
</style>

  //HTML CODE
  <div class="push"></div>     
  <div class="fotter">
  </div>
于 2012-09-18T19:48:19.813 に答える
0

この投稿で説明されている手法を適用します: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page .

私は同じ状況に直面していることに気づきました.これは、スティッキーフッターを使用するための最も包括的に説明されている方法だと思います.

于 2012-09-18T19:38:17.537 に答える
0

これは、CSS のみを使用して実行できます。

これは、nav、main、および footer を含む HTML ファイルの主要部分です。

...
<nav class="nav"> ... </nav>
<main class="main"> ... </main>
<footer class="footer"> ... </footer>
...

CSS に次の行を追加します。

...
.main {
    ...
    min-height: calc(100vh - <height of your footer>)
}
...

現在、メイン内にコンテンツがない場合、最小高さはメインがビューポート全体を占めるようにし、メインにコンテンツがある場合、最小高さは重要ではありません。

于 2020-08-06T15:22:11.510 に答える