私はこのフッタをページの一番下に残すことはできません

-1

私はウェブサイトを作っていて、何をしても私のフッターは私が望むように動作させることができません。ページの最下部（浮動していない）に表示されるので、コンテンツがいっぱいのページがある場合は表示されません。私は多くのことを試してみて、まわりを見回しましたが、必要な答えを見つけることができません。これが重複していれば、ごめんなさい。ここに私のCSSコードと、私のhtmlの構造です。私はこのフッタをページの一番下に残すことはできません

これは私のCSSです：

footer { 
bottom: 0; 
height: 10%; 
min-height: 75px; 
left: 0; 
position: absolute; 
width: 100%; 
text-align: center; 
background: #CAA400; 
vertical-align: middle; 
color: #232323; 
}

これは私のHTML（構造）である：

<head> 
</head> 
<body> 
    <div> 
    lots of random stuff 
    </div> 
<footer id="foot"><p></p></footer> 
</body>

私は、position: fixed、absolute、relativeを使用して多くのことを試してみたが、私はように見えることはできませんそれを理解する。私はおそらく私のCSSの親コンテナに問題があるかもしれないと思うが、私は確信していません、それに余分な入力も役立つだろう、ありがとう。

出典

2016-05-31 Twtheo

グーグルスティッキーフッター –

可能な重複Webページの？]（http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page） – jmoerdyk

あなたはタグにJavascriptを追加していないので、私は自分の答えを投稿するつもりはありません。 JSのケーキで。 –

さて、ここでの抜粋です -

<div id="content"> 
    lots of random stuff<br /> 
    lots of random stuff<br /> 
    lots of random stuff<br /> 
</div> 
<footer id="foot"><p></p></footer>

私はcontenにIDを追加しましたt。そして、JSを使って高さを検出し、必要に応じてフッターのtopプロパティを設定します。

var top = $('#content').height(); 
if(top > $(window).height()) { 
    $('#foot').css('top', top+'px'); 
}

残りのCSSは変わりません。

https://jsfiddle.net/v7tvxcxc/

https://jsfiddle.net/v7tvxcxc/1/

両方フィドルを確認してください - ここで

はサンプルです。最初のものは、コンテンツの高さがウィンドウの高さよりも低くなっています。そして、もう一つはちょうど反対です。

出典

2016-05-31 20:28:31

これを試してみたところ、ページが最初に読み込まれたときに一番下にあり、スクロールするとページの中央に移動してしまいます。 – Twtheo

@Twtheあなたはあなた自身の目的で試しましたか？フィドルでは、あなたが望むように働いているのですか？ –

htmlタグを選択する場合は、document.querySelector（）を使用します。あなたのcssファイルにIDを指定しているので、idで要素を選択する必要があります。これが助けにならない場合は、高さで％を使用してください。高さが増すにつれて、それがすべて100％になるので、それは敏感でなければなりません。例えば

#foot { 
 
bottom: 0; 
 
height: 10%; 
 
min-height: 75px; 
 
left: 0; 
 
position: absolute; 
 
width: 100%; 
 
text-align: center; 
 
background: #CAA400; 
 
vertical-align: middle; 
 
color: #232323; 
 
}

：

navbar {height: 10%} 
 
body {height: 80%} 
 
footer {height: 10%}

出典

2016-05-31 20:16:38 DevBear15

マークアップにスペーサーを追加できる場合は、ボディーの最小高さを100vhに設定してから、フッターを絶対に配置します。 position:relative;ボディがすべて流れるようにする必要があることを忘れないでください！

footer { 
 
bottom: 0; 
 
height: 10%; 
 
min-height: 75px; 
 
left: 0; 
 
position: absolute; 
 
width: 100%; 
 
text-align: center; 
 
background: #CAA400; 
 
vertical-align: middle; 
 
color: #232323; 
 
} 
 
#foot_spacer{ 
 
    height: 10%; 
 
    min-height:75px; 
 
} 
 
body{ 
 
    min-height:100vh; 
 
    box-sizing:border-box; 
 
    position:relative; 
 
    margin:0; 
 
}

<body> 
 
    <div> 
 
    lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff 
 
    </div> 
 
    <div id='foot_spacer'></div> 
 
<footer id="foot"><p></p></footer> 
 
</body>

私もそう本当に長い記事はあなたに本当に背の高いフッターを与えない代わりに10％を10vhするフッタ（スペーサ）高さを調整することをお勧めします。

それはそうここにもしてみてください

jsfiddleにサイズと遊ぶのがフィドル少し簡単です：[どのようにして、フッターが下部に滞在するのですかのhttps://jsfiddle.net/trex005/v8rct2ue/

出典

2016-05-31 20:59:49 trex005

私はこのフッタをページの一番下に残すことはできません

答えて

関連する問題