80

フッターをページの下部に固定し、中央に配置する必要があります。フッターの内容は常に変更される可能性があるため、margin-left: xxpx; で中央に配置することはできません。マージン右: xxpx;

問題は、何らかの理由でこれが機能しないことです。

#whatever {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

Web をクロールしましたが、何も見つかりませんでした。コンテナのdivとnadaを作ってみました。私は他の組み合わせとグルニッシュを試しました。どうすればこれを実現できますか?

ありがとう

4

9 に答える 9

53

次のようなスティッキー フッター ソリューションを使用する必要があります。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

このようなものは他にもあります。

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}

htmlで：

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>
于 2009-06-09T16:26:31.383 に答える
26

jQuery ソリューション

$(function(){
    $(window).resize(function(){
        placeFooter();
    });
    placeFooter();
    // hide it before it's positioned
    $('#footer').css('display','inline');
});

function placeFooter() {    
    var windHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var offset = parseInt(windHeight) - parseInt(footerHeight);
    $('#footer').css('top',offset);
}

<div id='footer' style='position: fixed; display: none;'>I am a footer</div>

古い CSS をハッキングするよりも JS を実装する方が簡単な場合があります。

http://jsfiddle.net/gLhEZ/

于 2011-10-26T00:25:09.397 に答える
7

問題は にありますposition: static。静的とは、その位置で何もしないことを意味します。position: absoluteあなたが望むものです。ただし、要素を中央に配置するのはまだ難しいです。以下が機能するはずです。

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 0px;
  right: 0px;
}

また

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 50%;
  transform: translate(-50%, 0);
}

しかし、私は最初の方法をお勧めします。この回答のセンタリング手法を使用しました: div で絶対に配置された要素を中央に配置する方法は?

于 2016-07-11T15:27:13.043 に答える
3

「問題の div を別の div に入れました」この div を囲みの div と呼びます... css の囲みの div の幅を 100% にし、底を 0 に固定して配置します...次に、問題の div を挿入しますenclose div これはどのように見えるかです

#problem {margin-right:auto;margin-left:auto; /*what ever other styles*/}
#enclose {position:fixed;bottom:0px;width:100%;}

それからhtmlで...

<div id="enclose">
    <div id="problem">
    <!--this is where the text/markup would go-->
    </div>
</div>

いこうぜ！
-ハイパーテキスタイル

于 2013-08-02T03:49:01.570 に答える
3

潜在的な問題が 2 つあります。

1 - 過去に IE で position:fixed に問題がありました。有効な doctype または非 IE ブラウザで IE7+ を使用している場合、これは問題の一部ではありません。

2 - フッター オブジェクトを中央に配置する場合は、フッターの幅を指定する必要があります。それ以外の場合は、ページの全幅にデフォルト設定され、左右の自動マージンは 0 に設定されます。フッター バーが (StackOverflow 通知バーのように) 幅を占有し、テキストを中央に配置する場合は、必要があります。 "text-align: center" を定義に追加します。

于 2009-06-09T16:48:29.667 に答える