CSS拡張コンテンツで下端にフッタを残す

ページHEREを作成していますが、フッターに問題があります。私はたくさんの研究をしていました。つまらないフッタを見てコンテナ内のすべてを包み込んでいました。私の頭は回転しています。CSS拡張コンテンツで下端にフッタを残す

このサイトの目的は、タイトルが左にクリックされると歌の歌詞を右に表示し、奇跡的にうまく機能することです。問題は、フッターが歌詞と一緒に動かないことです...

あなたの助けが大変ありがとうございます！

2017-10-07 M. Winter

デバッグのヘルプ（「なぜこのコードは動作しませんか」）には、目的の動作、特定の問題またはエラー、および質問自体に再現するのに必要な最短コードが含まれている必要があります。明確な問題文がない質問は、他の読者にとって有用ではありません。参照：[mcve]を作成する方法。また、[私のウェブサイトの何か、またはプロジェクトがうまくいかない。リンクを貼り付けることはできますか？]（https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste -a-link-to-it）。 –

position:absoluteを任意の要素に使用した場合は、position:relativeの親要素に追加する必要があります。それ以外の場合は機能しません。

body { 
    position: relative; 
    padding-bottom: 50px; 
}

それとも、体内でこれを追加したくない場合は、ただ一つの親.wrapperのようなdiv要素と、その中に、このCSSのすべてのdivをラップします。そのフロート要素

あなたが修正したり CSSを使用してスティッキーフッターを作るか、またはあなただけ footerのために、このCSSを置くことができ

出典

2017-10-07 04:49:06

素晴らしい、ありがとう！これらの方法の1つは他の方法よりも優れていますか？ –

私は1つの親divにすべてのdivをラップする2番目の方法が好きです。 –

を持っているので、

<div class="wrapper"> 
    <div class="header"></div> 
    <div class="banner"></div> 
    <div class="container clearfix"></div> 
    <footer></footer> 
<div>

もcontainerのdivにclearfixクラスを追加します。

.footer-class{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 100%; 
    z-index: 999; 
}

位置は、任意のページに移動することはありませんフッターのために固定されています。
bottom 0は、フッターを下部に固定します。
左と右の0はフッターを画面に配置します。
幅100％は全幅を示します。
Zインデックスが前面に表示されます。すべてのものがフッターの後ろに置かれます。

出典

2017-10-07 06:10:03

CSS拡張コンテンツで下端にフッタを残す

答えて

関連する問題