how to fixed footer in bottom?

JSX HTML Code

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;

JSX CSS Code

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

when I call this footer component inside the other component footer can not stay at bottom position

I try to fix it but I can not solve it##