脚注の下を固定

htmlを書くたびにfooterが迷惑をかけます.
不思議なことに、グーグルゲームをするたびに、2%ではなく50%未満の資料が現れます.
コンテンツの長さが変化したときに、異なる画面構成をフッターに適用する方法
説明した文章は珍しくない.
よりコンパクトな方法で書くことができます.
グーグルが発表した資料の多くは2種類ある.位置の1,2のみを調整する方法

1. position : absolute

フッタータグに次の場所を指定します.

position : absolute;
bottom : 0;

ブラウザの下部に埋め込みます.
この方法の問題は,コンテンツが長くなってスクロールすると,コンテンツの最下端に埋め込まれないことである.
(親の要素をとても無視しているので)

2. position : fixed

position : fixed;
bottom : 0;

このように説明する人は、自分のブログもこのように組織してほしいと思っています.
スクロールしていないほど短い場合は、正常に動作しているように見えます.
コンテンツが長くなると、スクロールにかかわらず、ブラウザの下部に脚注が埋め込まれます.
navが上部に固定されているページを見ることがありますが、footerを正常に表示したい人がいます
ページに入りましたか・・・?
不思議なことに、グーグル(Google)を使ってもあまり良いコンパクトな方法ではありません.

3.コンテンツ長を考慮せずに底部を固定する

まず、次の場合について説明します.

<div id='wrapper'>
  <div>
    content
  </div>
</div>
<footer></footer>

#wrapper{
  height : 100%;
}
footer{
  position : relative;
  transform : translateY(-100%);
}

divの内容が短すぎるとスクロールできません
パッケージでコンテンツの長さを強制的に増やし、その下にフッターを追加します.
しかし、この場合、オーバーフローの高さはfooterの高さと同じであるため、スクロールの高さはfooterの高さと同じである.
足の裏を足の裏の高さに押し付けることで、足の裏の問題を解決します.
このコードを適用するとposition:absoluteの効果はほぼ同じです.
コンテンツの長さが長すぎると、スクロール時にも問題が発生します.(屏蔽内容.)
したがって、梱包機の高さを次のように変更します.

#wrapper{
  height : auto;
  min-height: 100%;
}

上記のコードでは、パッケージ内の内容が短い場合、最小高さ(min-height)が適用される.
内容が長いので、スクロールすると自動的に高さが増します.
ただし、スクロールが発生したり、コンテンツがいっぱいになったりした場合は画面の下部の一部を隠すには、padding-blottomで画面の下部を事前に空にすることで解決できます.
そのため、このすべては
コンテンツの長さにかかわらず、画面の下部をフッターの外に固定できます.
以下のとおりです.
HTML

<div id='wrapper'>
  <div>
    content
  </div>
</div>
<footer></footer>

CSS

#wrapper{
  height: auto;
  min-height: 100%;
  padding-bottom: (footer높이);
}
footer{
  height: (footer높이);
  position : relative;
  transform : translateY(-100%);
}

この内容はあなたの
CSS 3-87[Fixed Footer]は、2つの方法(使用位置と使用Fixed)を使用して、ツイッターを下部に固定します。
作成ベース