web-dev-qa-db-ja.com

ページの下部にdivを配置する方法

CSSまたはjQueryを使用して<div>の位置をページの下部に設定するにはどうすればよいですか？

jqueryhtmlcssposition
11
Shahin

使用する position:absoluteおよびbottom:0

実例を確認してください。 http://jsfiddle.net/gyExR/

11
Hussein

必要に応じて、position:absolute;bottom:0;を使用できます。

6
fabrik

cssの場合：position：absoluteまたはposition：fixed

2
lmondria

これはすでに回答済みですが、CSSの専門家以外の人にもう少しコンテキストを与えるために：

与えられたHTML

<html>
  <body>
    <p>Some content</p>
    <div class="footer">down there</div>
  </body>
</html>

次に、次のcss

div.footer {
  position: absolute;
  bottom: 0;
  right: 0;
}

ビューポート（ブラウザウィンドウ）の右下隅にテキストを配置します。スクロールすると、フッターテキストが移動します。

使用する場合

div.footer {
  position: fixed;
  bottom: 0;
  right: 0;
}

一方、フッターはスクロールしてもビューポートの下部に留まります。同じ手法をtop: 0およびleft: 0 btwで使用して、要素を左上隅に配置できます。

1
Stefan Haberl

組み合わせ position:fixed;とbottom:0;私のために働きます。

1
Shrinivas Naik

私はあなたがこれを行うことができると思います：

    html{
      min-height:100%;
      position:relative;
      background-color:red;
    }
    .footer{
      bottom:0;
      position:absolute;
      background-color:blue;
    }
<html>
  <body>
    <div class='footer'>
    <h1>I am Footer</h1>
    </div>
    </body>
  </html>
0
Gilberto Giro