web-dev-qa-db-ja.com

ReactJS-antデザイン-レイアウトでフッターを修正

私のプロジェクトでは、reactjsを使用してantデザインフレームワークを使用しています。私はフッターが画面の下部に固定され、ヘッダーが上部に固定されるレイアウトデザインを達成しようとしています。

--------------------------------
|          HEADER              | 
--------------------------------
|       |                      |
|       |                      |
| LIST  |       CONTENT        |
|       |                      |
|       |                      |
--------------------------------
|          FOOTER              | 
--------------------------------

以下は私がやろうとしている私のライブの例です

https://codesandbox.io/embed/j4rkr509o

どのように機能させるかはわかりませんが、誰かが私を助けてくれればとても親切です。

乾杯。

javascriptcssreactjslayoutantd
5
iphonic

Antがこれを自動的にサポートするとは思わないが、コンテンツdivの高さを100vh-（header.height + footer.height）に設定するだけでよい。だからあなたの例では次のようなもの：

<Content>
   <div style={{ background: "blue", height: "calc(100vh - 55px)" }}>
      text
   </div>
</Content>
4
James

追加してみてくださいposition: stickyから<Header>および<Footer>、場所を指定します（つまり、top, bottom）あなたは彼らに固執させたいです。

あなたの目標を達成するために、あなたは試すことができます：

<Header style={{ position: "sticky", top: "0" }}>

<Footer style={{ position: "sticky", bottom: "0" }}>

よろしくお願いいたします:)

5
lyming90

独自のスティッキーフッターを作成する https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

次に、サイトの残りの部分にAntDコンポーネントを入力します。

0
corysimmons

サイドバーにSiderを使用し、position: absoluteを高さと幅が100％のメインレイアウトに設定できます

ここに codesandbox

また、codesandboxにantd.cssを含めなかったため、レイアウトコンポーネントは機能していませんでした

0
Yichaoz