Eine Möglichkeit, einen Fußzeilenabschnitt in React zu verankern?

Question

Ich habe einen Wrapper für meine App in React erstellt. Ich versuche, die Fußzeile am unteren Rand der Seite zu halten, aber wenn die Kinder rendern, bleibt die Fußzeile am ursprünglichen Ende der Seite und ändert nicht die Größe der Seite. Code unten. (Stellen Sie sich eine scrollbare Seite mit einer Fußzeile in der Mitte vor, nachdem das Kind gerendert hat).

import React, { Component } from 'react'; 
import Header from "./Header"; 
import Footer from "./Footer"; 

export default class Wrapper extends Component { 
    render() { 
    return (
     <div className="app-wrapper"> 
      <Header/> 
       <div className="content"> 
        {this.props.children} 
       </div> 
      <div> 
       <Footer/> 
      </div> 
     </div> 
    ); 
    } 
} 

Ich bin nicht so gut in CSS. Irgendwelche Ideen, was ich ausprobieren könnte? Ich habe bereits versucht, nach Lösungen ohne Erfolg zu suchen. Ich habe versucht, die grundlegenden Lösungen wie Position: relativ; links: 0; unten: 0; rechts: 0; Position: fest, Position: absolut usw.

Answer 1

Sie sollten position: relative|fixed (abhängig von Ihren Bedürfnissen) dem übergeordneten Container geben. Für exemple:

<div style={{ position: 'fixed', bottom: '0' }}> 
    <Footer /> 
</div> 

HTML dock to bottom

Answer 2

sorry für die Verwirrung Jungs. Ich hatte den Stil in meiner CSS-Datei neu definiert, so dass meine Stile überschrieben wurden. :(