¿Cómo fijar el pie de página en la parte inferior?

Código HTML JSX

 import React from 'react'; import { Card } from 'react-bootstrap'; import './Footer.css'; const Footer = () => { const today = new Date(); const year = today.getFullYear(); return ( <div id='foot'> <Card className="text-center bg-dark"> {/* <Card.Header>Featured</Card.Header> sticky-bottom */} <Card.Body className='blockquote-footer '> <Card.Title className='color-white'>Top Gear</Card.Title> <Card.Text> <p><small>copyright @ {year} </small></p> </Card.Text> </Card.Body> </Card> </div> ); }; export default Footer;

Código JSX CSS

 #foot { margin-top: 1rem; padding: 1rem; background-color: black; position: fixed; bottom: 0; left: 0; width: 100%; }

cuando llamo a este componente de pie de página dentro del otro componente, el pie de página no puede permanecer en la posición inferior

Intento arreglarlo pero no puedo solucionarlo##