reactjs - Responsive Footer Design in Reactstrap

Question

I'm having trouble with the responsive design of a footer with reactstrap. Given below is the code snippet for the footer.

const Styles=styled.div`
    .navbar{
        background-color: black;
        width: 100%;
    }
`;
const Column = styled.div`
        display: flex;
        flex-direction: column;
        margin: 10px 30px auto 30px;
`;
const Line = styled.hr`
    border: solid 1px grey;
    width: 700px`;

const Footer = () =>{
    return(
            <Styles>
                <Navbar className="navbar-fixed-bottom">
                    <Container className="justify-content-center">
                        <Row> 
                           . 
                           .
                           .
                        </Row>
                        <Row><Line/></Row>
                    </Container>
                    <Container className="justify-content-center"><Row><HeadingList>? CEC CSE Department</HeadingList></Row></Container>
                </Navbar>
            </Styles>
    )
}

The above code works fine if there's enough content to fit the page. But if there is not, then the below problem occurs

As it's evident from the picture, there's so much white space below the footer. How can I solve this issue? I've tried overriding the CSS position to sticky with bottom 0, but it creates problem when there's more than enough content to fit the page.

Some other responsive solutions are much appreciated.

Answer 1

等待大神答复