web-dev-qa-db-ja.com

ページの下部にフッターを保持します（必要に応じてスクロールします）。

ページの下部にフッターを表示しようとしています。また、ページが長い場合は、1画面分、フッターを一番下までスクロールした後にのみ表示するようにします。そのため、常に表示されるため、「position：fixed」を使用できません。

次の例をコピーしようとしています： http://peterned.home.xs4all.nl/examples/csslayout1.html

しかし、以下を使用すると、何らかの理由でフッターが長いページの半分を表示しています。

position: absolute; bottom:0

短いページと長いページの両方があり、両方の一番下に配置したいと思います。

長いページの下部にフッターを保持するにはどうすればよいですか？

フィドル

これらのフィドルを作成して、問題を表示し、コードをテストしました。ソリューションの実際の例を投稿してください。

フッターcss：

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}

.content {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

/* --- Footer --- */
.footerbar {                                position: absolute;
                                            width: 100%;
                                            bottom: 0;

                                            color: white;
                                            background-color: #202020;
                                            font-size: 12px; }

a.nav-footer:link,
a.nav-footer:visited {                      color: white !important; }
a.nav-footer:hover, 
a.nav-footer:focus {                        color: black !important;
                                            background-color: #E7E7E7 !important; }
htmlcssfooter
8
Paul

「スティッキーフッター」アプローチをお勧めします。次のリンクを参照してください。

http://css-tricks.com/snippets/css/sticky-footer/

10
scmccarthy22

Heightをoverflow：autoに置き換えます。 ＆体に位置を与える

html,body {
    position:relative; <!--Also give it a position -->
    margin:0;
    padding:0;
    overflow:auto; <!-- HERE -->
}

ボディを基準にしてフッターを配置します

/* --- Footer --- */
.footerbar { 
    position: relative; <!-- HERE -->
    width: 100%;
    bottom: 0;
    color: white;
    background-color: #202020;
    font-size: 12px; 
}

この場合、フッターのように、要素、特にメイン要素を相対的に配置することは、常に可能です。

ショートページ編集

min-height:400px; <!-- Give this a real number like 400px 
                  or whatever you want...dont leave it to 100% as -->
}
3
Dustin Scott Garza

私たちはしばらくの間、この問題に取り組んできました。入れ子になったいくつかのdivにハックとパッチを組み合わせたdivは、私たちにとって悪夢に変わりました。より多くのハックとパッチを必要とする驚きが常にありました。これが私たちが解決したものです：

css：

html, body  {
    margin: 0px;
    padding: 0px;
    height: 100%;
    color: #6f643a;
    font-family: Arial;
    font-size: 11pt; 
}

form {
   height: 100%;
}

体：

<table style="z-index: 1; margin: 0px; left: 0px; top: 0px; overflow:auto" border="0"  width="100%" height="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="top" align="center" >
         contents goes here
        </td>
    </tr>
    <tr>
        <td valign="top" bgcolor="gray" align="center" style="padding:20px">
            <font color="#FFFF00">copyright:Puppy</font>
            footer goes here
        </td>
    </tr>
</table>

それで十分です。 -asp.netを使用している場合は、フォームの高さを無視しないでください。

0
Shankar

これで、非常に簡単なフレックスボックスができました。

 body {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

注：本文には2つのdivのみを含める必要があります。1つはフッター用で、もう1つは残りの項目用です

0
deepak raghuwanshi

優れたフッターチュートリアル here があります。

デモページは here です。

基本的な前提は、本文ページがページの100％に引き伸ばされることです。最小高さも100％です。

フッターには次のルールが適用されます。

.footerbar {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}
0
Parvez Rahaman
html,body {
    margin:0;
    padding:0;
    height:100%;
}
.content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
.footerbar {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
}

IE7の場合

<!--[if lt IE 7]>
<style type="text/css">
    .content { height:100%; }
</style>
<![endif]-->
0
Parvez Rahaman