ウェブサイトの下部にスクロールしているときに伸びるスティッキーフッタ

Question

私のプロジェクトをもっときれいにするための素晴らしいアイデアがありました。

と私はフッターが上がることを、ここでさらに下にスクロールして怒鳴るとき、それは「奥付」と「連絡先などのすべてのものです：
私はフッタは下の写真のような標準であることを望みます"
インターネットでさまざまなソリューションを検索しましたが、適切なものが見つかりませんでした。
私があなたを助けてくれることを願っています。

私のフッターのコード：

HTML：

<footer> 
    <div class="footer"> 
      <p class="footer-text"><a href="{{ path('homepage') }}">OneClick</a></p> 
    </div> 
</footer> 

はCSS：

.footer { 
    position: fixed; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    width: 100%; 
    padding-top: 10px; 
    background: #F28724; 
    font-size: 1.3em; 
} 
.footer-text { 
    color: #3a3a3a; 
} 
.footer-text > a { 
    color: #3a3a3a; 
    display: table; 
    text-align: center; 
    margin-right: auto; 
    margin-left: auto; 
} 

Answer 1

$(function() { 
 
    $(window).scroll(function() { 
 
    if ($(document).scrollTop() > 100) { 
 
     $('.footerContent').slideDown(650); 
 
    } else if ($(document).scrollTop() < 100) { 
 
     $('.footerContent').fadeOut(500); 
 
    } 
 
    }); 
 
})

body, 
 
html { 
 
    height: 1000px; 
 
} 
 
.footer { 
 
    position: fixed; 
 
    z-index: 99; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    padding-top: 10px; 
 
    background: #F28724; 
 
    font-size: 1.3em; 
 
} 
 
.footer-text { 
 
    color: #3a3a3a; 
 
} 
 
.footer-text > a { 
 
    color: #3a3a3a; 
 
    display: table; 
 
    text-align: center; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 
.footerContent { 
 
    height: 150px; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    left: 0; 
 
    background: #F28724; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="footer"> 
 
    <p class="footer-text"><a href="{{ path('homepage') }}">OneClick</a> 
 
    </p> 
 
</div> 
 

 
<div class="footerContent"> 
 
    <p>Contact ... 
 
    <p> 
 
</div>

Answer 2

フッターや下に絶対位置を割り当てる：0;

Answer 3

あなたはCSSのcalc機能を使用しています。このソリューションを試みることができるが（続きを読む：http://www.w3schools.com/cssref/func_calc.asp）：

<header> 
    <h1>Header</h1> 
</header> 

<main> 
    <content> 
    <p>content</p> 
    </content> 

    <footer> 
    <p>Footer</p> 
    </footer> 
</main> 

、しかし、これはIE8をサポートしていないと報告されて、私はクロムが良く

HTMLそれを実行すると考えています

CSS：

html, 
body { 
    margin:0; 
    padding:0; 
    min-height:100vh; 
} 

header { 
    background: LightSlateGray; 
    height: 100px; 
    line-height: 100px; 
    padding: 0 10px; 
} 
header h1 { margin: 0; } 

main { height: auto; min-height: calc(100vh - 100px); } 
content, footer { display: inline-block; width: 100%; } 

content { height: auto; min-height: calc(100vh - 200px); background:lightblue; } 
footer { 
    height:100px;   /* Height of the footer */ 
    background:#6cf; 
} 

デモ：https://jsfiddle.net/89ucrec5/4/