web-dev-qa-db-ja.com

Reactページフッターをページの下部に保持

以下の画像のようにページ下部のフッターを修正しようとすると問題が発生します。

enter image description here

私はグーグルで多くの提案を見ますが、私はまだ問題に直面しています。この問題は<div data-reactroot></div>を親として100％に設定することはできません。誰か助けてもらえますか？

前もって感謝します！

更新：フッターのスタイル：

borderTop: '1px solid #ddd',
height: '60px',
lineHeight: '60px',
backgroundColor: 'white'
javascripthtmlcssreactjs
7
An Nguyen

周囲のコンテナの下部に配置するようにフッターに指示する必要があります。

フッターcss：

position:absolute;
left:0;
bottom:0;
right:0;

そして、コンテナ（react-root div）の場合：

padding-bottom:60px;

別の方法として（IE 8をサポートする必要がない場合）、div.containerでこのスタイルを試すことができます。

height: calc(100% - 60px);
17
mwoelk

上記の解決策が機能しない他の人にとっては、次の手順を試すことができます：

  1. parentdivに、positionなどの静的でないrelativeを指定します（デフォルトのpositionはstaticであることに注意してください）
  2. parent divに100vhの最小の高さを指定します。これにより、垂直方向にすべての利用可能なスペースを占めることができます
  3. 次に、フッター（child）をdivにラップする必要がある場合は、フッターに次のプロパティを指定します。 position: absolute; bottom: 0; width: 100%。

[〜＃〜] update [〜＃〜]：場合によっては、フッターdivpositionをabsoluteに設定しても機能しないことがあります。そのような場合は、代わりにrelativeを使用してください。

うまくいけば、上記の手順で修正できます:-)

4
Ikechukwu Kalu

コンテンツラッパーを用意し、その最小高さを100vhに設定することが重要です。

min-height: 100vh; (100% of the viewport height)

min-height: 100%; (100% of the parent's element height)

ここを見てください私は非常によく説明されて働いていました： https://medium.com/@zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551

3
Ginte Ezerskyte

フッターを下部に配置できるように、ページのラッパーを作成しようとしていますか？その場合、その相対位置を使用して新しいコンポーネントを作成し、他のコンポーネントを子として渡し、フッターの下部に絶対位置を指定できます。

0
ceckenrode