web-dev-qa-db-ja.com

DIVをページの下部に揃える

検索結果ページの下部に配置する必要があるDIVがあります。問題は検索結果なしまたはページに表示されていない検索結果の行、DIVはページの下部から上がります。

enter image description here

しかし、このように配置する必要があります

enter image description here

そして、さらに行があり、ページが下にスクロールできる場合、 DIVは次のように配置する必要があります。

enter image description here

私の現在のコードは次のようになります

        <div id="bottom-stuff>

            <div id="bottom">
                             // DIV stuff
            </div>

        </div>


#bottom-stuff {
    padding: 0px 30px 30px 30px;
    margin-left:150px;
    position: relative;
}

#bottom{

    position: absolute; bottom: 0px; 
}
htmlcss
19
Naveen Gamage

私はあなたが何を意味するか知っていると思うので、見てみましょう....

HTML：

<div id="con">
   <div id="content">Results will go here</div>
   <div id="footer">Footer will always be at the bottom</div>
</div>

CSS：

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
div {
    outline: 1px solid;
}
#con {
   min-height:100%;
   position:relative;
}
#content {
   height: 1000px; /* Changed this height */
   padding-bottom:60px;
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;
}

このデモの高さはcontentheight: 1000px;これにより、下にスクロールしてどのように見えるかを確認できます。

DEMO HERE

このデモのコンテンツの高さはheight: 100px;スクロールなしでどのように見えるかを見ることができます。

DEMO HERE

したがって、フッターはdiv contentの下に移動しますが、コンテンツが画面より大きくない場合（スクロールなし）、画面の下部にフッターが配置されます。これがあなたが望むものだと思います。それを見て、遊びましょう。

背景で見やすいようにフィドルを更新しました。

31
Ruddy

position:fixed; bottom:0;。これにより、divは下部に固定されたままになります。

WORKING DEMO

HTML：

<div id="bottom-stuff">
  <div id="search"> MY DIV </div>
</div>
<div id="bottom"> MY DIV </div>

CSS：

#bottom-stuff {

    position: relative;
}

#bottom{

    position: fixed; 
    background:gray; 
    width:100%;
    bottom:0;
}

#search{height:5000px; overflow-y:scroll;}

お役に立てれば。

13
Nitesh

最後に、私は動作する良いCSSを見つけました!!! position: absolute;なし。

body {
    display:table;
    min-height: 100%;
}
.fixed-bottom {
  display:table-footer-group;
}

私はこれを長い間探していました！お役に立てれば。

4
levkaster

それは簡単な修正です、私はそれが役立つことを願っています。

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

css：

#content{min-height: calc(100vh - 100px);}

100vhはデバイスの高さ100％、100pxはフッターの高さ

コンテンツがデバイスの高さよりも高い場合、フッターは下にとどまります。そして、コンテンツはデバイスの高さよりも短く、フッターは画面の下部にとどまります

2
Marco Antonio Aguilar Gomez

ネイサンリーの答えは完璧です。 position:absolute;について何かを追加したかっただけです。コードで使用していたようにposition:absolute;を使用したい場合は、ページの片側からそれを押し出すと考える必要があります。

たとえば、divを下部のどこかにしたい場合は、position:absolute; top:500px;を使用する必要があります。それはあなたのdiv 500pxをページの上部からプッシュします。他のすべての方向にも同じルールが適用されます。

[〜＃〜] demo [〜＃〜]

1
Josan Iracheta