私のHTMLフッターは下に移動しません

-2

私はフッターを右下に移動しようとしています。現在のところ、ページの唯一のものは、ブラウザのサイズを変更するとAT ALLに移動しません。ページの下部または右に移動するのはずっと少なくなります。私はHTMLの初心者ですが、主にデータサイエンスプロジェクトの出力としてこれを行っています。ここに私のコードは次のとおりです。私のHTMLフッターは下に移動しません

<!DOCTYPE html> 
 
<html lang="en"> 
 
    
 

 

 
<style> 
 
html { 
 
    background: url("https://lh3.ggpht.com/TOsicwUVM6bKoB1_u_5noea0kkFAegkAdBFQcmTXhwKrN5485URcl0IWxgjldjd59A=h900") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
body { height: 100%;} 
 
#nonFooter { position: relative; min-height: 100%;} 
 
* html #nonFooter { height: 100%;} 
 
#Footer { position: relative; margin-top: -7.5em; } 
 

 
</style> 
 

 
<body> 
 
    
 
    <div class="page-wrap"> 
 
     <div class="header"> 
 
      <h3 style ="color:#FFFFFF" class="text-muted">Headerthing</h3> 
 
     </div> 
 
    
 
     <div> 
 
      <h1 align="center" style ="color:#FFFFFF">Predict tool</h1> 
 
      <p class="lead"></p> 
 
     </div> 
 
     <div style ="width: 300px; margin: 130px auto 0 auto; "> 
 
     <div style ="color:#FFFFFF;"> 
 
      <form action="upload.php" method="post" enctype="multipart/form-data"> 
 
    Select image to upload: 
 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
 
    <input type="submit" value="Upload Image" name="submit"> 
 
      </form> 
 

 
     <form action="/action_page.php"> 
 
    Instagram Handle:<br> 
 
    <input type="text" name="handle"><br> 
 
    <input type="submit" value="Submit"> 
 
</form> 
 
     </div> 
 
     </div> 
 

 

 
</div> 
 
    
 
<footer class="site-footer"> 
 
    <p style="color:white">Founders: Charles Barkley, Hakeem the Dream and Shaqs fat ass </p> 
 
</footer> 
 

 

 
</body> 
 

 
</html>

出典

2017-03-24 DataScienceAmateur

だから、あなたは一番下にそれをしたいですか？ –

それは素晴らしいだろう。右は巨大なボーナスになります – DataScienceAmateur

あなたのタイトルを大文字で入力しないでください。ここには理由がありません。メインページの質問リストを見ると、すべての大文字であなたのものは表示されません。その理由は次のとおりです。 b）テキストの読み込みと解析が難しくなる。そして、c）それは非常に失礼で、人々をあなたに近づけるように迷惑をかける。いくつかの尊敬と共通の礼儀を示して、ここに来ることはしません。あなたの事務所や家に来て、あなたに助けを求めるときにはあなたのところに来ます。 –

あなたのフッタは、ページの一番下にすでにあります。それを下に移動することによって、デフォルトで<p>タグに自動的に割り当てられるマージンを参照していると仮定します。あなたはこれらを削除することができ、およびテキストは、以下のCSSで絶対右下に表示されます：

.site-footer p { 
    margin: 0; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
}

私はこのhereを展示更新フィドルを作成しました。

フッターが見える画面の右下に滞在する場合は、要素が常に表示されるように、あなたがその場所にスクロールされていない場合でもbottom: 0と併せてposition: absoluteは、それを作ることに注意してくださいまだ。

希望すると便利です。 :)

出典

2017-03-24 02:43:59

素晴らしいですが、1つの質問ですが、CSSファイルをポイントする部分はどこに追加しますか？私は "mystyle.css"というファイルを同じフォルダに保存しましたが、どのコードをHTMLファイルに追加すれば正しくポイントすることができますか？再度、感謝します！ – DataScienceAmateur

あなたは内部のスタイルシートをそのまま使用しています。上記のコードを '

私のHTMLフッターは下に移動しません

答えて