web-dev-qa-db-ja.com

CSS：下部に固定して中央に配置

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

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

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

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

ありがとう

csspositioningsticky-footer
77
CamelCamelCamel

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

* {
    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>
49
marcgg

改訂 コード：ダニエルカニス ：

cSSで次の行を変更するだけです

.problem {text-align:center}
.enclose {position:fixed;bottom:0px;width:100%;}

およびhtml：

<p class="enclose problem">
Your footer text here.
</p>
39
malsony

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/

26
Thilo Savage

問題は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の絶対位置要素をセンタリングする方法

5
user3502079

「別のdivの問題div」を囲み、このdivを囲いdivと呼びます... cssで囲んだdivの幅を100％にし、位置を0で固定します...次に問題のdivを挿入します囲み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>

いこうぜ！
-ハイパーテクシー

3
Daniel Kanis

私が見る2つの潜在的な問題があります：

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

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

3
Rob Allen

@Michaelからのコメントに基づく：

これを行うより良い方法があります。 position：relativeとフッターのサイズのパディング+必要なコンテンツとフッター間のスペースでボディを作成します。次に、absoluteとbottom：0でフッターdivを作成します。

私は説明のために掘りに行き、それはこれに要約します：

  • デフォルトでは、bottom：0pxの絶対位置は、ページの下部ではなく、ウィンドウの下部に設定します。
  • 要素の相対位置は、その子の絶対位置の範囲をリセットします...したがって、本体を相対位置に設定することにより、bottom：0pxの絶対位置がページの下部を本当に反映するようになりました。

詳細は http://css-tricks.com/absolute-positioning-inside-relative-positioning/

1
lmsurprenant

これはcssグリッドを使用した例です。

html, body{
    height: 100%;
    width: 100%;
}
.container{
    height: 100%;
    display:grid;
    /*we divide the page into 3 parts*/
    grid-template-rows: 20px auto  30px;
    text-align: center;   /*this is to center the element*/ 
    
}

.container .footer{
    grid-row: 3;   /*the footer will occupy the last row*/
    display: inline-block;
    margin-top: -20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="header">

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

        </div>
        <div class="footer">
            here is the footer
        </div>
    </div>
</body>
</html>

cSSグリッドを使用できます：具体例

0
Firas Omrane