19

これは私のフッターのコードですが、コンテンツの真下ではなく、ページの下部に表示するにはどうすればよいですか?

/*footer */
#footer .column {
    float: left;
    width: 25%;
}

#footer .column div {
    margin: 5px;
    height: 200px;
    background: #eeeeee;
}

<div id="footer">
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
</div>

注: これは固定フッターである必要はありません

4

11 に答える 11

42

実際には 2 つの主なオプションがあります。

  1. 固定フッター- フッターは常にページの下部に表示されます
  2. 押されたフッター-コンテンツがウィンドウをいっぱいにしない場合でも、フッターはページの下部に押し出されます

固定フッターの方が簡単です。

固定フッター

フッターを固定するには、CSS でフッターの位置を固定に設定し、フッターposition:fixedをページの下部に配置しますbottom:0px。CSS-Tricksのコード スニペットを次に示します。

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* 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');
}

押されたフッター

プッシュされたフッターは少しトリッキーです。十分なコンテンツがない場合にフッターがページの下部に留まらない理由を示す素晴らしい図を次に示します。

プッシュ フッターの問題のビジュアル

基本的に、フッター要素がその上にある要素の下に「プッシュ」され、その要素の高さがページの高さほど長くないため、問題が発生しています。これを修正するには、ページの高さ全体 (フッターの高さを差し引いたもの) までフッターが「押し込まれる」ようにする必要があります。

方法は次のとおりです。

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

html, body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

これを行う方法と上記のコードのソースに関するより詳細なチュートリアルを次に示します。

そして、これは同じソースからのコードの動作デモです。

于 2013-04-11T22:58:40.217 に答える
8

Bootstrap には、ページの下部に固定されるフッターの例があります: https://getbootstrap.com/examples/sticky-footer/

CSSは次のとおりです。

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

次にHTMLで：

<footer class="footer">

</footer>
于 2016-08-15T09:33:16.683 に答える
0

ビューポートの高さを埋めるのに十分なコンテンツがページにない場合でも、フッターをページの下部に残したいということですか?

その場合は、次のトリックを使用できます: CSS スティッキー フッター - http://ryanfait.com/sticky-footer/、http://www.cssstickyfooter.com/またはhttp://css-tricks.com/スニペット/css/スティッキーフッター/

通常、スティッキー フッターのトリックは、ラッパー div で最小の高さを宣言することに依存しています。これは、次のように HTML コードを再フォーマットする必要があることを意味します。

<div id="wrap">
    <div id="content">
        /* Main body content */
    </div>
</div>

<div id="footer">
    /* Footer content here */
</div>

CSS の場合:

html, body, #wrap {
    height: 100%;
}
#wrap {
    height: auto;
    min-height: 100%;
}
#content {
    overflow: hidden;
    padding-bottom: (footer height);
}
#footer { 
    position: relative;
    margin-top: -(footer height); /* Note the negative value */
    height: (footer height);
    clear:both;
}

フッターの高さが可変の可能性がある場合は、JavaScript を使用して の下部パディング#contentと の上部マージンを設定する必要があります。値は、要素自体#footerの計算された高さに依存します。#footer

于 2013-04-11T22:57:39.400 に答える
0

html 要素の高さを 100% に設定する必要がある場合があります。そうしないと、ページ自体がコンテンツに必要な高さだけになります。私はこれに遭遇しました。

于 2013-04-11T22:59:02.383 に答える
0 
#main {padding-bottom: 150px;} /* Should have the same value of footer's height */ 
#footer {position: relative; 
margin-top: -150px; /* footer's height */
于 2013-04-11T23:00:28.293 に答える
0

フレックスボックスを使用するだけです: ボディディスプレイをフレックスに設定し、フッターをフレックスエンドに合わせます。このようにして、フッターは常に最後のコンポーネントになります。

body {
   display: flex;
   flex-direction: column;
}

footer {
  align-self: flex-end;
}

于 2021-05-31T19:41:26.133 に答える